两个HTML，CSS布局实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="head">
<div id="logo">
<img src="img/logo1.png" width="200px" height="100px" />
</div>
<div>
<div class="menu1">联系我们</div></a>
<div class="menu1">关于我们</div>
<div class="menu1">新闻动态</div>
<div class="menu1">产品展示</div>
<div class="menu1 menu_z">首页</div>
</div>
</div>
<hr color="#f2e5ba" size="1" />
<div id="tu">
<div>
<img src="img/20170516114133939.jpg" width="1200px" height="642px" />
</div>
<div id="zuo"></div>
<div id="you"></div>
</div>
<div id="title">公司产品推荐</div>
<div id="nr">
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="qt">
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
</div>
<div id="yejiao">
<div id="yejiao1">
Copyright © 2017-2018 臻体纤美 版权所有 天启网络技术支持
</div>
<div id="yejiao2">
电话：0635-8240686 邮箱：ztqm001@163.com 地址：聊城市东昌府区市政大楼有
</div> </div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0px auto;
padding:0px;
font-family:微软雅黑;}
#head{
width:1200px;
height:118px;}
#logo{
width:200px;
height:100px;
float:left;}
#menu{
width:;
height:118px;
float:left;}
.menu1{
width:80px;
height:80px;
background-image:url(img/li_bg.png);
float:right;
text-align:center;
line-height:80px;
vertical-align:middle;
font-size:13px;
color:#b08f23;
margin-top:38px;
}
.menu1:hover{
color:white;
background-image:url(img/li_bg_h.png);
cursor:pointer;
}
.menu_z{
color:white;
background-image:url(img/li_bg_h.png);
}
#tu{
width:1200px;
height:642px;
margin-top:10px;}
#zuo{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
top:-343px;
left:-560px;
cursor:pointer;
}
#you{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
background-position:right;
top:-387px;
right:-560px;
cursor:pointer;
}
#title{
width:1200px;
height:50px;
margin:30px 0px 20px 0px;
text-align:center;
line-height:50px;
vertical-align:middle;
font-size:22px;
color:#1E90FF;
font-weight:bold;
}
#nr{
width:1200px;
height:302px;
}
.nr_li{
width:280px;
height:300px;
border:1px solid #f2e5ba;
float:left;
margin:0px 9px 0px 9px;
}
.nr_img{
width:280px;
height:180px;
}
.nr_1{
width:270px;
height:30px;
padding:5px;
font-weight:bold;
line-height:30px;
vertical-align:middle;
}
.nr_2{
width:270px;
height:60px;
padding:5px;
font-size:13px;
overflow:hidden;
}
#qt{
width:1200px;
height:406px;
margin-top:20px;
margin-bottom:20px;
}
.qtli{
width:280px;
height:406px;
border:1px solid #f2e5ba;
margin:0px 9px 0px 9px;
float:left;
}
.qttitle{
width:280px;
height:45px;
background-color:#b08f23;
}
.qt_zuo{
float:left;
height:45px;
margin-left:10px;
line-height:45px;
vertical-align:middle;
font-size:15px;
font-weight:bold;
color:white;
}
.qt_you{
float:right;
height:45px;
margin-right:10px;
line-height:45px;
vertical-align:middle;
font-size:14px;
}
.qt{
width:280px;
height:269px;}
.qt_nr{
width:260px;
height:72px;
padding:10px;
overflow:hidden;
font-size:13px;
text-indent:20px;
color:#7b7b7b;
}
#yejiao{
width:1200px;
height:120px;
}
#yejiao1{
width:1200px;
height:35px;
margin-top:30px;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:13px;
color:#898989;
}
#yejiao2{
width:1200px;
height:35px;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:13px;
color:#898989;
}
然后，跟着感觉制做一个简单的个人主页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title> <link href="index.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="head1">
<div id="head_logo">
<img src="img/logo.jpg" width="100px" height="100px"/>
</div>
<div>
<div class="menu">展望未来</div>
<div class="menu">发展历程</div>
<div class="menu">知识学习</div>
<div class="menu">历史</div>
<div class="menu menu1">首页</div>
</div>
</div>
<hr color="#FC8727" 4px/>
<div style="clear:both"></div>
<div>
<div id="font">
<a href="#">谁将新樽辞旧月，今月曾经照古人。</a>
</div>
<div id="zuo"></div>
<div id="you"></div>
</div>
<div>
<div id="nr">主要内容</div>
</div>
<div class="nr1">
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
</div>
<div class="nr1">
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
</div>
<div style="clear:both"></div>
<hr color="#FC8727" 4px/>
<div id="yejiao">
copyright © wode网 1994-长生不死，All RightsReserved | </div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0px auto;
font-family:华文彩云,隶书;}
#head1{
margn-top:10px;
height:200px;
width:1000px;
background-image:url(img/t2.jpg);
background-repeat:round;
}
#head_logo{
margin:60px 20px 20px 20px;
height:100px;
width:100px;
float:left;
border-radius:5px;
}
.menu{
height:60px;
width:80px;
font-size:14px;
text-align:center;
line-height:80px;
vertical-align:middle;
float:right;
margin:80px 20px 20px 20px;
background-image:url(img/beijing3.jpg);
border-radius:15px;
position:relative;
top:20px;
}
.menu:hover{
opacity:0.9;
background-image:url(img/beijing4.jpg);
border-radius:15px;
box-shadow:10px 10px 10px #CF0;
cursor:pointer;
}
.menu1{
opacity:0.9;
background-image:url(img/beijing4.jpg);
border-radius:15px;
box-shadow:10px 10px 10px #CF0;
}
#font{
margin-top:10px;
height:500px;
width:1000px;
text-align:center;
line-height:500px;
background-image:url(img/t3.jpg);
font-family:隶书;
font-size:36px;
color:#900;
background-repeat:round;
}
#zuo{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
top:-250px;
left:-410px;
cursor:pointer;
}
#you{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
background-position:right;
top:-294px;
right:-410px;
cursor:pointer;
}
#jiantou1{
height:0px;
width:0px;
border-top:10px solid #FFF;
border-bottom:10px solid #000;
border-right:10px solid #FFF;
border-left:10px solid #FFF;}
#nr{
margin:0px 0px 0px 0px;
height:50px;
width:100%;
line-height:50px;
font-family:微软雅黑;
font-size:26px;
text-align:center;
vertical-align:middle;
font-weight:bold;
position:relative;
top:-50px;}
.nr1{
width:1000px;
height:300px;}
.nr2{
margin:10px;
width:228px;
height:300px;
float:left;
border:1px solid #9C3;
background-image:url(img/beijing3.jpg);
}
.nr_title{
font-family:隶书;
font-size:17px;
text-align:center;
}
.nr_n{
font-family:宋体;
font-size:13px;
text-indent:2.5em;
}
.nr3{
margin:10px;
width:228px;
height:300px;
float:left;
border:1px solid #9C3;
background-image:url(img/beijing2.jpg);
}
.nr4{
float:left;}
.nr5{
float:right;
font-family:微软雅黑;}
p{
font-family:宋体;
margin-top:10px;
font-size:12px;
text-indent:2em;
overflow:hidden;}
#yejiao{
float:left;
font-family:微软雅黑;
margin-left:400px;
margin-top:30px;
font-size:12px;
color:#999;
}
需要注意的知识点：
制作一个网页，首先要考虑网页的宽度，对于初学者，最好开始就将网页的宽度定好。
*{}：
样式表先设置好通用样式，比如margin：0px auto；居中，padding：0px，去掉多余的内边距，大部分字体样式，等。
看好网页大致分为几块，然后开始从头设置。
在流式布局中，在前面的元素先走，所以如果设置向右流，代码中的顺序应该反过来写。
在font-famliy中可以设置多个字体，如果浏览器不识别第一个则会自动识别下一个。
如果设置的正常字体在浏览器中显示不正确，应查看编码格式。
HTML和css使用的注释不同，在HTML代码中使用<!-- -->，但是在css中该注释无效，应使用/* */。
：hover鼠标移上的效果，基本设置和普通样式一样，有几个需要注意
cursor:pointer; 鼠标的光标变成手
border-radius:5px;圆角，像素的多少代表圆角的弧度
box-shadow:0 0 5px white; 阴影效果，每个方向阴影的大小以及颜色
display:none隐藏 block显示 隐藏不占位置
visibility:hidden 隐藏 visible 显示 隐藏占位置
overflow:hidden; 超出部分隐藏
需要注意的是，<sapn>标签的大小是由内容决定的，单独设置标签的大小没有意义，但是，如果给它display:block使它块状显示，就可以，会达到和<div>相似的效果。
透明效果：
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);
这三种方式均可达到透明效果，是不同CSS标准的写法，由于有些不同浏览器支持不同的标准，所以最好全部写上。
在网页中，常用特殊字符有的有：
下面是大多数特殊字符一览表：
|
|
|||||||||
| ´ | ´ | © | © | > | > | µ | µ | ® | ® |
| & | & | ° | ° | ¡ | ¡ | | » | » | |
| ¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
| • | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
| ¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
| ¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
|
|
|||||||||
| € | € | £ | £ | ¥ | ¥ | ||||
|
|
|||||||||
| „ | „ | … | … | · | · | › | › | ª | ª |
| ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
| † | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
| ‡ | ‡ | ‘ | ‘ | ‰ | ‰ | ­ | ˜ | ˜ | |
|
|
|||||||||
| ≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
| ∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
| ♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
| ↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | | ‍ |
| ♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | | ‌ |
| ≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | ||
|
|
|||||||||
| α | α | η | η | μ | μ | π | π | θ | θ |
| β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
| χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
| δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
| ε | ε | λ | λ | φ | φ | τ | τ | ||
|
|
|||||||||
| Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
| Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
| Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
| Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
| Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
两个HTML，CSS布局实例的更多相关文章
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- [div+css]网站布局实例二
重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
随机推荐
- stm32中断学习总结
经过了两天,终于差不多能看懂32的中断了,由于是用的库函数操作的,所以有些内部知识并没有求甚解,只是理解知道是这样的.但对于要做简单开发的我来说这些已经够了. 我学习喜欢从一个例程来看,下面的程序是我 ...
- 热爱H5
我不去想是否能够功成名就既然选择了前端便只顾埋头于无声 我不去想能否赢得掌声既然钟情于IT就勇敢得踏步前行 我不去想前行的路上会不会日暮穷途既然目标是未来留给现在的只能是汗水 我不去想所谓的成功是不是 ...
- Java设计模式之（建造者模式）
建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式通常包括下面几个角色: 1. builder:抽象建造者,给出一个抽象接口,以规范产品对象的各个组 ...
- Yii2框架---常用代码
一.Php控制器跳转 return $this->redirect('/site/index/index'); 二.回调自身控制器 self::actionXxxx(); 三.获取当前用 ...
- [大数据]-Elasticsearch5.3.1+Kibana5.3.1从单机到分布式的安装与使用<1>
一.Elasticsearch,Kibana简介: Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域, Lucene可以被认为是迄今为止最先 ...
- 热切换Log4j级别配置
欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...
- Redis入门学习
一.摘要 二.五种数据类型的基本命令操作 三.Redis连接池 四.普通同步方式 五.事务方式(Transactions) 六.管道(Pipelining) 七.管道中调用事务 八.分布式直连同步调用 ...
- flume集群日志收集
一.Flume简介 Flume是一个分布式的.高可用的海量日志收集.聚合和传输日志收集系统,支持在日志系统中定制各类数据发送方(如:Kafka,HDFS等),便于收集数据.其核心为agent,agen ...
- ZooKeeper实践：（1）配置管理
一. 前言 配置是每个程序不可或缺的一部分,配置有多重方式:xml.ini.property.database等等,从最初的单机环境到现在的分布式环境. 1. 以文件的格式存储配置,修改任何都 ...
- JavaScript之onXXXX事件和addEventListener的区别
JavaScript之onXXXX事件和addEventListener的区别 1.首先介绍两者的用法: 1.1onXXXX的用法:以onclick为例 第一种: obj.onclick = func ...