div+css模式编写html静态网页例子_仿照网页制作
<!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="#">辽宁朝阳 </a></li>
<li><a href="#">辽宁朝阳 </a></li>
<li><a href="#">辽宁朝阳 </a></li>
<li><a href="#">辽宁朝阳 </a></li>
<li><a href="#">辽宁朝阳 </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.初步掌握父子选择器等选择器的使用。
发现了许多疑问，还未被解答：大多数都标注在备注中，下周有机会尽快解决。
欢迎大家帮助解决疑问、提建议、交流。
div+css模式编写html静态网页例子_仿照网页制作的更多相关文章
- DIV+CSS:如何编写代码才能更有效率
如何编写CSS代码才能更有效率?这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- 采用 DIV+CSS 布局网页练习
实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...
- Div+Css的初步运用
采用DIV+CSS模式的网站具有以下优势:1.表现和内容相分离 2.代码简洁,提高页面浏览速度 3.易于维护和改版 4.提高搜索引擎对网页的索引效率. 然后呢html文件中放置CSS有三种类型:内联. ...
- div+css实例教程
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...
- [转]DIV+CSS和TABLE的区别
现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...
- DIV+CSS 入门
玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...
- H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- 表达式：使用API创建表达式树（6）
一.ConstantExpression:表示具有常量值的表达式.因为表达式应用过程中,参数据多是 Expressions 类型,算是对常量值的一种包装吧. ConstantExpression使用比 ...
- idea+maven
使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 http://my.oschina.net/gaussik/blog/385697 使用IntelliJ IDEA开发Sprin ...
- Creating a web application.
About creating web GIS applications As you learn and use ArcGIS for Server, you'll probably reach th ...
- Typescript 团队合作的利器
前言 在介绍Typescript 之前,我需要隆重介绍一个人: 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi ...
- NSJSONSerialization-JSON数据与NSDictionary和NSArray之间的转化
转载▼ 在iOS 5 中,苹果引入了一个解析JSON串的NSJSONSerialization类. 通过该类,我们可以完成JSON数据与NSDictionary和NSArray之间的转化. ...
- 做了一个类似天猫鼠标经过icon的动画，记录一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 DeviceOrientation来实现手机网站上的摇一摇功能
原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...
- vsftpd.conf 联机手册
vsftpd.conf - vsftpd 的配置文件 描述vsftpd.conf 可以用于控制 vsftpd, 以实现各种各样的功能. vsftpd 缺省到 /etc/vsftpd.conf 处查找此 ...
- .NET 4.0 使用 asyn await
.NET 4.0 也可以使用asyn await 使用nuget 搜索await即可发现微软官方包,安装导项目就可以使用了. 参考:http://stackoverflow.com/questio ...
- Scut AccountServer
开始以Scut搭建服务器框架: 1. 初始目录结构: libs 存放 scut 的引擎文件: release 存放 src 输出的文件: src 存放各子工程源文件: 2. Install.bat:目 ...