两个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之呼吸灯实验
首先,我想引用一下在一片博文里 看到 的一段话,写的很详细, 首先来说,你要使用PWM模式你得先选择用那个定时器来输出PWM吧!除了TIM6.TIM7这两个普通的定时器无法输出PWM外,其余的定时器都 ...
- bootstrap快速入门笔记（八）-按钮，响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...
- hdu4417 Super Mario
Problem Description Mario is world-famous plumber. His “burly” figure and amazing jumping ability re ...
- linux 下 启动oracle
[root@csyang ~]# su - oracle #首先su到oracle用户 [oracle@csyang ~]$ sqlplus sys/passwd as sysdba #使用sys用户 ...
- PHP 安装 phpredis 扩展（二）
本文主要介绍为 PHP 安装 phpredis 扩展,并用 PHP 代码连接 Redis 服务器. 一.安装 phpredis 扩展 1. Linux.macOS 下安装 #. 下载.解压.安装.编译 ...
- Angular vs React 最全面深入对比
如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角 ...
- TreeSet小练习
package 练习.test1; import java.util.Iterator; import java.util.TreeSet; /* 需求:将字符串中的数值进行排序. 例如String ...
- ueditor 文件上传的分析和总结
正式开始之前,先写两个常用又容易被我忘掉的文件和流相互转化的方法. 1,文件转流 FileStream fs = new FileStream(filename,FileMode.Open,FileA ...
- java-cef嵌入基于Chrome内核浏览器，做页面爬虫（可以尽在ajax异步请求数据）
1 CentOS 7.0 上安装和配置 VNC 服务器 2.1 2.1.1 首先,我们需要一个可用的桌面环境(X-Window),如果没有的话要先安装一个. 注意:以下命令必须以 root 权限运行. ...
- 【linux命令】打开关闭防火墙iptables
防火墙关闭 关闭防火墙(linux) 经过自己的实验,发现在ubuntu中service iptables 无法使用. 同时,在init.d中并没有iptables的程序,iptables程序在/sb ...