正文

div+css模式编写html静态网页例子_仿照网页制作

IP云
IP云V管理员/4 阅读
06/18
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="citizens.css">
</head>
<body> <!--line1-->
<div class="line1">
<div>
<img src="line1_logo.png">
</div>
<div class="topsearch">
<input type="text" name="search"><br/>
<ul>
<li><a href="#">辽宁朝阳&nbsp</a></li>
<li><a href="#">辽宁朝阳&nbsp</a></li>
<li><a href="#">辽宁朝阳&nbsp</a></li>
<li><a href="#">辽宁朝阳&nbsp</a></li>
<li><a href="#">辽宁朝阳&nbsp</a></li>
</ul>
</div>
<div class="topbutton">
<ul >
<li><button class="button" datasrc="#">免费发布信息</button></li><!--应该怎么做？？？-->
<li><a href="#">修改/删除信息</a></li>
</ul>
</div>
</div> <!--line2、3、4-->
<div class="line234">
<!--特色类目-->
<div class="special">
<!--标题图-->
<span><img src="line2_title1.png"/></span>
<!--6张图-->
<ul class="sixul">
<li>
<img src="icon1.png"/><br/>
<a href="#">闲置真心送</a>
</li>
<li>
<img src="icon2.png"/><br/>
<a href="#">拼车顺风车</a>
</li>
<li>
<img src="icon3.png"/><br/>
<a href="#">宠物赠送</a>
</li>
<li>
<img src="icon4.png"/><br/>
<a href="#">找人寻物</a>
</li>
<li>
<img src="icon5.png"/><br/>
<a href="#">技能交换</a>
</li>
<li>
<img src="icon6.png"/><br/>
<a href="#">找室友合租</a>
</li>
</ul>
<!--三张图-->
<ul class="threepictures">
<a href="#"><img src="pic_big_1.png"/></a>
<a href="#" id="righttop"><img src="pic_small_1.png"/></a>
<a href="#"><img src="pic_small_11.png"/></a>
</ul>
</div>
<!--二手市集-->
<div class="special">
<!--标题图-->
<span><img src="line2_title2.png"/></span>
</div>
<!--二手车-->
<div class="special">
<!--标题图-->
<span><img src="line2_title3.png"/></span>
</div>
<!--人才招聘-->
<div class="person">
<!--标题图-->
<span><img src="line2_title4.png"/></span>
<table>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
<!--一行-->
<tr>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
<td><a href="#">一表人才</a></td>
</tr>
</table>
</div>
<!--便民服务-->
<div class="convenient"></div>
<!--工具-->
<div class="tool"></div>
<!--百姓故事-->
<div class="convenient"><a href="#"><img src="line4_1.png"/></a></div>
<!--百姓网卧槽-->
<div class="convenient"><a href="#"><img src="line4_2.png"/></a></div>
<!--快速入职-->
<div class="convenient"><a href="#"><img src="lin4_3.png"/></a></div>
<!--微信-->
<div class="wechat"><img src="lin4_wechat.png"></div>
</div> <!--line5-->
<div class="line5">
<!--bottom-->
<div class="botoom">
<img src="line5_bottom.png"/>
</div>
</div> </body>
</html>

BeijingCitizens.html

body{
margin: 0 auto;
border:1px solid gainsboro;
width: auto;
} a:link{
text-decoration: none;
color: black;
font-size: 14px;/*为什么都是14px 表格里的比其他地方的字体小？？？*/
}/*未放鼠标*//*要设置字体颜色去相应的地方设定 （在全局设为什么不管用？？？）*/ a:hover{
text-decoration: underline;
color: black;
}/*鼠标放在上面*/
/* a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线*/ ul{
list-style-type: none;
} .line1{
height: 115px;
background-color:#EEEFF1;
border: solid 2px #DEDEDE;
} .line1 div{
float: left;
height: 115px;
} .topsearch{
width: 553px;
} .topsearch input{
margin: 30px 50px 0px 150px;
} .topsearch ul li{
float: left;
border-right: solid 2px #999999;
} .topbutton ul{
margin: 30px;
} .topbutton a{
color: #999999;
text-align: center;
} .button{
height: 45px;
width: 180px;
background-color: #FF4466;
border: none;
color: white;
} .line234{
background-color: #EEEFF1;
height: 1090px;
padding: 26px 67px 55px 77px;
} .special{
background-color: white;
width: 223px;
height: 500px;
float: left;
margin: 0 21px 0 0;
/*border: solid 1px #DEDEDE;*//*为什么加border格子就乱了？？？？？*/
} .special span img{
width: 223px;
} .sixul{
padding: 0 15px;
} .sixul li{
margin: 10px 0 0 0;
float: left;
}/*ul内边距为零 li外边距为0 可有效去除ul自带的左边距*/ .sixul li img {
width: 96px;
height: 44px;
margin-bottom:5px;
} .sixul li a{
text-align: end;/*???为什么不居中*/
color: black;
} .threepictures{
padding: 0 15px 0 15px;
position: relative;
float: left;
} .threepictures li{
float: left;
} #righttop{
position: absolute;
left: 146px;
top:;
} .person{
background-color: white;
width: 465px;
height: 500px;
float: left;
} .person span img{
width: 465px;
} .person table{
margin-left: 30px;
align-items: center;/*为什么不管用????*/
border: 1px red;/*为什么不管用？？？？*/
width:436px;
height:396px;
} .person table a{
color: black;
} .convenient{
background-color: chartreuse;
width: 223px;
height: 260px;
float: left;
margin: 24px 21px 0 0;
} .convenient img{
width: 223px;
height: 260px;
} .tool{
background-color: black;
width: 954px;
height: 260px;
float: left;
margin: 24px 0 0 0;
} .wechat{
background-color: green;
width: 470px;
height: 260px;
float: left;
margin: 24px 0 0 0;
} .wechat img{
width: 470px;
height: 260px;
} .line5{
background-color:#EEEFF1;
height: 235px;
border: solid 2px #DEDEDE;
/*padding:85px 0 0 0;*/
} .botoom{
height: 150px;
width: 1350px;
float: left;
margin-top: 86px;
}
/*???????
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
*/ .botoom img{
height: 150px;
width: 1350px;
}

citizens.css

这是我第一次使用div+css编程模式写html静态网页。由于时间原因没有做完整，但收获很大，包括掌握的技术和发现的疑问。

掌握的技术总结为两点：1.初步掌握用浮动技术、盒子模型进行网页布局。2.初步掌握父子选择器等选择器的使用。

发现了许多疑问，还未被解答：大多数都标注在备注中，下周有机会尽快解决。

欢迎大家帮助解决疑问、提建议、交流。