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元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- reflact中GetMethod方法的使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- 什么是DOM
什么DOM,简单的说.DOM是一套对文档的内容进行抽象和概念化的方法. 在现实世界里,人们对所谓的“世界对象模型”都不会陌生.例如,当用“汽车”.房子 和树等名词
- iOS NSData简单解析
iOS 基本数据类型之NSData 1 nsdata 作用: 用于存储二进制的数据类型 nadat类提供一种简单的方式,它用来设置缓存区.将文件的内容读入到缓存区.或者将缓存区中的内容写到一个文件. ...
- css布局小技巧 2016.03.06
偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...
- SpringMVC4+thymeleaf3的一个简单实例（篇一：基本环境）
首语:用SpringMVC和thymeleaf实现一个简单的应用,包括基本环境搭建,SpringMVC4和thymeleaf3的整合,页面参数的获取,页面参数验证,以及用MySQL保存数据.我会把步骤 ...
- jdk配置环境变量（windows）
1.配置环境变量:右击"我的电脑"-->"高级"-->"环境变量"1)在系统变量里新建"JAVA_HOME" ...
- 线程取消 (pthread_cancel)
线程取消(pthread_cancel) 基本概念pthread_cancel调用并不等待线程终止,它只提出请求.线程在取消请求(pthread_cancel)发出后会继续运行,直到到达某个取消点(C ...
- Java学习笔记——动态代理
所谓动态,也就是说这个东西是可变的,或者说不是一生下来就有的.提到动态就不得不说静态,静态代理,个人觉得是指一个代理在程序中是事先写好的,不能变的,就像上一篇"Java学习笔记——RMI&q ...
- Sublime Text 皮肤插件安装
安装皮肤, 举例sodahttps://github.com/buymeasoda/soda-themectrl+shift+p => Package Control: Install Pack ...
- One-day-学习笔记-商品成交时发送短信
个人学习笔记(one) 根据需求:商品成交时发送短信 html代码省略..... Model代码省略..... /* * --------------------------------------- ...