两个HTML，CSS布局实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="index.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="head">

        <div id="logo">

            <img src="img/logo1.png" width="200px" height="100px" />

        </div>

        <div>

            <div class="menu1">联系我们</div></a>

            <div class="menu1">关于我们</div>

            <div class="menu1">新闻动态</div>

            <div class="menu1">产品展示</div>

            <div class="menu1 menu_z">首页</div>

        </div>

    </div>

    <hr color="#f2e5ba" size="1" />

    <div id="tu">

        <div>

            <img src="img/20170516114133939.jpg" width="1200px" height="642px" />

        </div>

        <div id="zuo"></div>

        <div id="you"></div>

    </div>

    <div id="title">公司产品推荐</div>

    <div id="nr">

        <div class="nr_li">

            <div >

                <img src="img/20170518071914505.jpg" height="180px" width="280px" />

            </div>

            <div class="nr_1">

                明星产品推荐

            </div>

            <div class="nr_2">

                明星产品推荐

            </div>

        </div>

                <div class="nr_li">

            <div >

                <img src="img/20170518071914505.jpg" height="180px" width="280px" />

            </div>

            <div class="nr_1">

                明星产品推荐

            </div>

            <div class="nr_2">

                明星产品推荐

            </div>

        </div>

                <div class="nr_li">

            <div >

                <img src="img/20170518071914505.jpg" height="180px" width="280px" />

            </div>

            <div class="nr_1">

                明星产品推荐

            </div>

            <div class="nr_2">

                明星产品推荐

            </div>

        </div>

                <div class="nr_li">

            <div >

                <img src="img/20170518071914505.jpg" height="180px" width="280px" />

            </div>

            <div class="nr_1">

                明星产品推荐

            </div>

            <div class="nr_2">

                明星产品推荐

            </div>

        </div>

    </div>

    <div  style="clear:both"></div>

    <div id="qt">

        <div class="qtli">

            <div class="qttitle">

                <div class="qt_zuo">

                    产品展示：

                </div>

                  <div class="qt_you">

                     更多>>

                </div>

            </div>

            <div>

                <img src="img/20170516071750947.jpg" width="280px" height="269px" />

            </div>

            <div class="qt_nr">

                  臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。

            </div>

        </div>

                <div class="qtli">

            <div class="qttitle">

                <div class="qt_zuo">

                    产品展示：

                </div>

                  <div class="qt_you">

                     更多>>

                </div>

            </div>

            <div>

                <img src="img/20170516071750947.jpg" width="280px" height="269px" />

            </div>

            <div class="qt_nr">

                  臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。

            </div>

        </div>

        <div class="qtli">

            <div class="qttitle">

                <div class="qt_zuo">

                    产品展示：

                </div>

                  <div class="qt_you">

                     更多>>

                </div>

            </div>

            <div>

                <img src="img/20170516071750947.jpg" width="280px" height="269px" />

            </div>

            <div class="qt_nr">

                  臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。

            </div>

        </div>

        <div class="qtli">

            <div class="qttitle">

                <div class="qt_zuo">

                    产品展示：

                </div>

                  <div class="qt_you">

                     更多>>

                </div>

            </div>

            <div>

                <img src="img/20170516071750947.jpg" width="280px" height="269px" />

            </div>

            <div class="qt_nr">

                  臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。

            </div>

        </div>

    </div>

    <div id="yejiao">

           <div id="yejiao1">

            Copyright &copy; 2017-2018 臻体纤美 版权所有　天启网络技术支持

        </div>

        <div id="yejiao2">

            电话：0635-8240686　邮箱：ztqm001@163.com　地址：聊城市东昌府区市政大楼有　

        </div>

    </div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

*{

    margin:0px auto;

    padding:0px;

    font-family:微软雅黑;}

#head{

    width:1200px;

    height:118px;}

#logo{

    width:200px;

    height:100px;

    float:left;}

#menu{

    width:;

    height:118px;

    float:left;}

.menu1{

        width:80px;

    height:80px;

    background-image:url(img/li_bg.png);

    float:right;

    text-align:center;

    line-height:80px;

    vertical-align:middle;

    font-size:13px;

    color:#b08f23;

    margin-top:38px;

}

.menu1:hover{

    color:white;

    background-image:url(img/li_bg_h.png);

    cursor:pointer;

}

.menu_z{

    color:white;

    background-image:url(img/li_bg_h.png);

}

#tu{

    width:1200px;

    height:642px;

    margin-top:10px;}

#zuo{

    width:44px;

    height:44px;

    background-image:url(img/jiantou.png);

    position:relative;

    top:-343px;

    left:-560px;

    cursor:pointer;

    }

#you{

    width:44px;

    height:44px;

    background-image:url(img/jiantou.png);

    position:relative;

    background-position:right;

    top:-387px;

    right:-560px;

    cursor:pointer;

    }

#title{

    width:1200px;

    height:50px;

    margin:30px 0px 20px 0px;

    text-align:center;

    line-height:50px;

    vertical-align:middle;

    font-size:22px;

    color:#1E90FF;

    font-weight:bold;

    }

#nr{

    width:1200px;

    height:302px;

}

.nr_li{

    width:280px;

    height:300px;

    border:1px solid #f2e5ba;

    float:left;

    margin:0px 9px 0px 9px;

}

.nr_img{

    width:280px;

    height:180px;

    }

.nr_1{

    width:270px;

    height:30px;

    padding:5px;

    font-weight:bold;

    line-height:30px;

    vertical-align:middle;

}

.nr_2{

    width:270px;

    height:60px;

    padding:5px;

    font-size:13px;

    overflow:hidden;

}

#qt{

    width:1200px;

    height:406px;

    margin-top:20px;

    margin-bottom:20px;

}

.qtli{

    width:280px;

    height:406px;

    border:1px solid #f2e5ba;

    margin:0px 9px 0px 9px;

    float:left;

}

.qttitle{

    width:280px;

    height:45px;

    background-color:#b08f23;

}

.qt_zuo{

    float:left;

    height:45px;

    margin-left:10px;

    line-height:45px;

    vertical-align:middle;

    font-size:15px;

    font-weight:bold;

    color:white;

}

.qt_you{

    float:right;

    height:45px;

    margin-right:10px;

    line-height:45px;

    vertical-align:middle;

    font-size:14px;

}

.qt{

    width:280px;

    height:269px;}

.qt_nr{

    width:260px;

    height:72px;

    padding:10px;

    overflow:hidden;

    font-size:13px;

    text-indent:20px;

    color:#7b7b7b;

}

#yejiao{

    width:1200px;

    height:120px;

}

#yejiao1{

    width:1200px;

    height:35px;

    margin-top:30px;

    text-align:center;

    line-height:35px;

    vertical-align:middle;

    font-size:13px;

    color:#898989;

}

#yejiao2{

    width:1200px;

    height:35px;

    text-align:center;

    line-height:35px;

    vertical-align:middle;

    font-size:13px;

    color:#898989;

}

两个HTML，CSS布局实例

然后，跟着感觉制做一个简单的个人主页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>个人主页</title>

<link href="index.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="head1">

        <div id="head_logo">

            <img src="img/logo.jpg" width="100px" height="100px"/>

        </div>

        <div>

            <div class="menu">展望未来</div>

            <div class="menu">发展历程</div>

            <div class="menu">知识学习</div>

            <div class="menu">历史</div>

            <div class="menu menu1">首页</div>

        </div>

    </div>

        <hr color="#FC8727" 4px/>

    <div style="clear:both"></div>

    <div>

        <div id="font">

            <a href="#">谁将新樽辞旧月，今月曾经照古人。</a>

        </div>

        <div id="zuo"></div>

        <div id="you"></div>

    </div>

    <div>

        <div id="nr">主要内容</div>

    </div>

    <div class="nr1">

        <div class="nr2">

            <img src="img/-1f2b25f522133839.jpg" width="230"/>

            <div class="nr_title">我的导师</div>

            <div class="nr_n">我的大学生活</div>

        </div>

        <div class="nr2">

            <img src="img/-1f2b25f522133839.jpg" width="230"/>

            <div class="nr_title">我的导师</div>

            <div class="nr_n">我的大学生活</div>

        </div>

        <div class="nr2">

            <img src="img/-1f2b25f522133839.jpg" width="230"/>

            <div class="nr_title">我的导师</div>

            <div class="nr_n">我的大学生活</div>

        </div>

        <div class="nr2">

            <img src="img/-1f2b25f522133839.jpg" width="230"/>

            <div class="nr_title">我的导师</div>

            <div class="nr_n">我的大学生活</div>

        </div>

    </div>

    <div class="nr1">

        <div class="nr3">

            <div class="nr_title nr4">我的技能</div>

            <div class="nr5"><a href="#">更多>></a></div>

            <div style="clear:both"></div>

            <p>天行健，君子以自强不息。</p>

        </div>

        <div class="nr3">

            <div class="nr_title nr4">我的技能</div>

            <div class="nr5"><a href="#">更多>></a></div>

            <div style="clear:both"></div>

            <p>天行健，君子以自强不息。</p>

        </div>

        <div class="nr3">

            <div class="nr_title nr4">我的技能</div>

            <div class="nr5"><a href="#">更多>></a></div>

            <div style="clear:both"></div>

            <p>天行健，君子以自强不息。</p>

        </div>

        <div class="nr3">

            <div class="nr_title nr4">我的技能</div>

            <div class="nr5"><a href="#">更多>></a></div>

            <div style="clear:both"></div>

            <p>天行健，君子以自强不息。</p>

        </div>

    </div>

    <div style="clear:both"></div>

    <hr color="#FC8727" 4px/>

    <div id="yejiao">

     copyright　&copy 　wode网　1994-长生不死，All 　RightsReserved　|　    </div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

*{

    margin:0px auto;

    font-family:华文彩云,隶书;}

#head1{

    margn-top:10px;

    height:200px;

    width:1000px;

    background-image:url(img/t2.jpg);

    background-repeat:round;

    }

#head_logo{

    margin:60px 20px 20px 20px;

    height:100px;

    width:100px;

    float:left;

    border-radius:5px;

    }

.menu{

    height:60px;

    width:80px;

    font-size:14px;

    text-align:center;

    line-height:80px;

    vertical-align:middle;

    float:right;

    margin:80px 20px 20px 20px;

    background-image:url(img/beijing3.jpg);

    border-radius:15px;

    position:relative;

    top:20px;

    }

.menu:hover{

    opacity:0.9;

    background-image:url(img/beijing4.jpg);

    border-radius:15px;

    box-shadow:10px 10px 10px #CF0;

    cursor:pointer;

    }

.menu1{

    opacity:0.9;

    background-image:url(img/beijing4.jpg);

    border-radius:15px;

    box-shadow:10px 10px 10px #CF0;

    }

#font{

    margin-top:10px;

    height:500px;

    width:1000px;

    text-align:center;

    line-height:500px;

    background-image:url(img/t3.jpg);

    font-family:隶书;

    font-size:36px;

    color:#900;

    background-repeat:round;

    }

#zuo{

    width:44px;

    height:44px;

    background-image:url(img/jiantou.png);

    position:relative;

    top:-250px;

    left:-410px;

    cursor:pointer;

    }

#you{

    width:44px;

    height:44px;

    background-image:url(img/jiantou.png);

    position:relative;

    background-position:right;

    top:-294px;

    right:-410px;

    cursor:pointer;

    }

#jiantou1{

    height:0px;

    width:0px;

    border-top:10px solid #FFF;

    border-bottom:10px solid #000;

    border-right:10px solid #FFF;

    border-left:10px solid #FFF;}

#nr{

    margin:0px 0px 0px 0px;

    height:50px;

    width:100%;

    line-height:50px;

    font-family:微软雅黑;

    font-size:26px;

    text-align:center;

    vertical-align:middle;

    font-weight:bold;

    position:relative;

    top:-50px;}

.nr1{

    width:1000px;

    height:300px;}

.nr2{

    margin:10px;

    width:228px;

    height:300px;

    float:left;

    border:1px solid #9C3;

    background-image:url(img/beijing3.jpg);

    }

.nr_title{

    font-family:隶书;

    font-size:17px;

    text-align:center;

    }

.nr_n{

    font-family:宋体;

    font-size:13px;

    text-indent:2.5em;

    }

.nr3{

    margin:10px;

    width:228px;

    height:300px;

    float:left;

    border:1px solid #9C3;

    background-image:url(img/beijing2.jpg);

    }

.nr4{

    float:left;}

.nr5{

    float:right;

    font-family:微软雅黑;}

p{

    font-family:宋体;

    margin-top:10px;

    font-size:12px;

    text-indent:2em;

    overflow:hidden;}

#yejiao{

    float:left;

    font-family:微软雅黑;

    margin-left:400px;

    margin-top:30px;

    font-size:12px;

    color:#999;

}

两个HTML，CSS布局实例

需要注意的知识点：

制作一个网页，首先要考虑网页的宽度，对于初学者，最好开始就将网页的宽度定好。

*{}：

样式表先设置好通用样式，比如margin：0px auto；居中，padding：0px，去掉多余的内边距，大部分字体样式，等。

看好网页大致分为几块，然后开始从头设置。

在流式布局中，在前面的元素先走，所以如果设置向右流，代码中的顺序应该反过来写。

在font-famliy中可以设置多个字体，如果浏览器不识别第一个则会自动识别下一个。

如果设置的正常字体在浏览器中显示不正确，应查看编码格式。

HTML和css使用的注释不同，在HTML代码中使用，但是在css中该注释无效，应使用/* */。

：hover鼠标移上的效果，基本设置和普通样式一样，有几个需要注意

cursor:pointer; 鼠标的光标变成手

border-radius:5px;圆角，像素的多少代表圆角的弧度

box-shadow:0 0 5px white; 阴影效果，每个方向阴影的大小以及颜色

display:none隐藏 block显示隐藏不占位置

visibility:hidden 隐藏 visible 显示隐藏占位置

overflow:hidden; 超出部分隐藏

需要注意的是，<sapn>标签的大小是由内容决定的，单独设置标签的大小没有意义，但是，如果给它display:block使它块状显示，就可以，会达到和<div>相似的效果。

透明效果：

opacity:0.2;

-moz-opacity:0.2;

filter:alpha(opacity=20);

这三种方式均可达到透明效果，是不同CSS标准的写法，由于有些不同浏览器支持不同的标准，所以最好全部写上。

在网页中，常用特殊字符有的有：

两个HTML，CSS布局实例

下面是大多数特殊字符一览表：



´	´	©	©	>	>	µ	µ	®	®
&	&	°	°	¡	¡			»	»
¦	¦	÷	÷	¿	¿	¬	¬	§	§
•	•	½	½	«	«	¶	¶	¨	¨
¸	¸	¼	¼	<	<	±	±	×	×
¢	¢	¾	¾	¯	¯	“	"	™	™

€	€	£	£	¥	¥

„	&bdquo;	…	…	·	·	›	&rsaquo;	ª	ª
ˆ	&circ;	“	“	—	—	’	’	º	º
†	&dagger;	‹	&lsaquo;	–	–	‚	&sbquo;	”	”
‡	&Dagger;	‘	‘	‰	&permil;			˜	&tilde;

≈	≈	⁄	&frasl;	←	←	∂	∂	♠	&spades;
∩	∩	≥	≥	≤	≤	″	″	∑	∑
♣	&clubs;	↔	↔	◊	&loz;	′	′	↑	↑
↓	↓	♥	&hearts;	−	−	∏	∏	‍	&zwj;
♦	&diams;	∞	∞	≠	≠	√	√	‌	&zwnj;
≡	&equiv;	∫	∫	‾	&oline;	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	ς	&sigmaf;

秒客网

两个HTML，CSS布局实例

相关文章