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元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- Android开发--去掉标题栏
Android开发中为了尽可能美观,会去掉标题栏.去掉标题栏有三种方法. 一.在Activity代码里实现 在代码中实现以下方法: this.requestWindowFeature(Window.F ...
- C# 面向对象编程的继承性-多继承
多继承 如果要使用多继承,需要使用接口,因为C#中的类只支持单继承,而接口支持多继承,实现多继承时,继承的多个接口中间用逗号(,)隔开. 说明: 实现多继承时,继承的可以是多个接口,也可以是一个类及多 ...
- 用html/css做的一个登入小界面（图片瀑布流）
一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...
- C蛮的全栈之路-node篇(一) 环境布置
目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 ---------------- 我是分割线 ---- ...
- 数据挖掘相关的10个问题[ZZ]
NO.1 Data Mining 和统计分析有什么不同? 硬要去区分Data Mining和Statistics的差异其实是没有太大意义的.一般将之定义为Data Mining技术的CART.CHAI ...
- Flightgear 编译
一.FlightGear简介 FlightGear 始于1997年,是一个开源的多平台飞行模拟器. 二.FlightGear编译过程 FlightGear平台的说明文档见:http://wiki.fl ...
- phpcms(4) V9 栏目管理
phpcms V9框架系统后台管理之栏目管理,请参见下文的源码分析(添加栏目和修改栏目): 参照添加栏目的界面图示,便于对源代码的理解: <?php // 文件路径:phpcms/modul ...
- 在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步
在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步 下载安装 vscode-ftp-sync 插件. 安装方法1. Ctrl+Shift+P 输入 ext install [插件 ...
- RabbitMQ笔记
RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...