两个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 &copy; 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　&copy 　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标准的写法，由于有些不同浏览器支持不同的标准，所以最好全部写上。

在网页中，常用特殊字符有的有：

下面是大多数特殊字符一览表：



´	´	©	©	>	>	µ	µ	®	®
&	&	°	°	¡	¡			»	»
¦	¦	÷	÷	¿	¿	¬	¬	§	§
•	•	½	½	«	«	¶	¶	¨	¨
¸	¸	¼	¼	<	<	±	±	×	×
¢	¢	¾	¾	¯	¯	“	"	™	™

€	€	£	£	¥	¥

„	&bdquo;	…	…	·	·	›	&rsaquo;	ª	ª
ˆ	&circ;	“	“	—	—	’	’	º	º
†	&dagger;	‹	&lsaquo;	–	–	‚	&sbquo;	”	”
‡	&Dagger;	‘	‘	‰	&permil;			˜	&tilde;

≈	≈	⁄	&frasl;	←	←	∂	∂	♠	&spades;
∩	∩	≥	≥	≤	≤	″	″	∑	∑
♣	&clubs;	↔	↔	◊	&loz;	′	′	↑	↑
↓	↓	♥	&hearts;	−	−	∏	∏	‍	&zwj;
♦	&diams;	∞	∞	≠	≠	√	√	‌	&zwnj;
≡	&equiv;	∫	∫	‾	&oline;	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	ς	&sigmaf;

两个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布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

随机推荐

jquery中is()函数
is(expr)函数判断当前Jquery对象所匹配的元素是否存在.只要其中一种符合,就返回 true,否则返回 false. 如果 expr是个字符串,既视为Jquery的选择器,用于表示选择的元素. ...
搭建自己的Git服务器
前言: GitHub是一个免费托管开源代码的远程仓库,使用起来即方便又安全,但在国内有时访问巨慢,原因你懂得.还有一些公司和个人视源码如生命,既不想开源代码又不想给Github交保护费.这时搭建一个自 ...
nodejs版本管理工具NVM(Node Version Mene)
最近打算用心学习nodejs,所以在学习中了解到NVM-nodejs的版本管理工具,下面我就记录下我学习并且安装的详细过程,请大神们放过~~第一步.你要先把你本机上安装的nodejs以及npm相关的东 ...
Oracle12c多租户管理用户、角色、权限
Oracle 数据库 12 c 多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).那么我们如何在容器数据库 (CDB) 和可插拔数据库 (PDB)管理用户权限.背景: ...
使用gnuplot对tpcc-mysql压测结果生成图表
tpcc-mysql的安装:http://www.cnblogs.com/lizhi221/p/6814003.html tpcc-mysql的使用:http://www.cnblogs.com/li ...
【树莓派】为树莓派配置或扩展swap分区
---恢复内容开始--- 由于树莓派3的默认内存只有1G,而应用程序运行过程中,存在大量的IO读写,以及网络转换,内存交换等.这样,也有很多buffer.cache资源占用等,很快就会接近1GB,最终 ...
R语言分析(二)——薛毅R语言第二章后面习题解析
包括2.2—2.6中间的习题,2.2的习题中第三问和第四问,应该有其他的解答方法,但我看他的题目,似乎是在A和B的基础上进行,所以就选择了使用for循环的方法做着习题,又不断查着书,这样,书籍也熟悉 ...
AngularJs 常用的过滤器
date格式化 {{ 1304375948024 | date }} //结果:May 3, 2011 {{ 1304375948024 | date:"MM/dd/ ...
转：Redis使用认证密码登录
Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...
ScheduledFuture和RunnableScheduledFuture详解
ScheduledFuture java.util.concurrent 接口 ScheduledFuture<V> 类型参数: V - 此 Future 返回的结果类型. 所 ...

两个HTML，CSS布局实例

两个HTML，CSS布局实例的更多相关文章

随机推荐

热门专题