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元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- ArcMap - 分割.
一,分割面: 1,在屏幕上新增线分割面: 使待编辑的面处于编辑状态 -> 选择待分割的面(使其处于选中状态) -> 选择编辑工具的 (Cut Polygons Tools) ->画线 ...
- How to customize authentication to my own set of tables in asp.net web api 2?
ssuming your table is called AppUser, convert your own AppUser domain object to IUser(using Microsof ...
- jQuery AJAX实现调用页面后台方法
1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...
- Linux系统swap已分区但无法挂载与cryptswap1问题
linux下察看swap分区大小的命令 top 或者fdisk -l 或者free -m SWAP分区一般大小为物理内存的2倍,但最大不超过2G; 增加SWAP空间的方法有两个:增加另外一个SWAP分 ...
- Git 基础再学习之：git checkout -- file
首先明白一下基本概念和用法,这段话是从前在看廖雪峰的git教程的时候摘到OneNote的 准备工作: 新建了一个learngit文件夹,在bash中cd进入文件夹,用以下命令创建一个仓库. $ git ...
- set,multiset容器类型
set和multiset会根据特定的排序准则,自动将元素排序.两者不同处在于multiset允许元素重复而set不允许. 一.集和多集(set 和multiset 容器类) 在使用set和multis ...
- CentOS7开机启动管理systemd简介及使用
systemd提供更优秀的框架以表示系统服务间的依赖关系实现系统初始化时服务的并行启动,同时达到降低Shell的系统开销的效果systemd的目标是:尽可能启动更少进程:尽可能将更多进程并行启动.sy ...
- CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...
- 页面点击关闭弹出提示js代码
代码效果为: <script> window.onbeforeunload = function() { return "您好!\n我是abc\n —————————————— ...
- centos挂存储
#看硬盘有木 fdisk -l #格式化 parted /dev/sdb mklabel gpt print quit #如果多个分区执行 如果不要么 #mkpart primary 0 4.5T ...