第020讲仿sohu

来源：互联网发布：做彩票网络销售怎么样编辑：程序博客网时间：2024/05/18 00:24

样式代码：

<!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=gb2312" /><title>搜狐</title><link href="sohu.css" rel="stylesheet" type="text/css" /></head><body class="body"><!--top -->    <div class="top">    <!-- 设置span line-height 与父布局同样高度这样span字体就能相对居中 -->        <span class="login">登陆表单</span>        <span class="setindex">设置首页面</span>        <span class="myhref">设置超链接</span>    </div><div class="logo">      <div class="topicon"><img src="sohu.png"/></div>      <div class="topicon_one">            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>            <a href="www.baidu.com"><span class="topicon_one">导航条</span></a>      </div>      <div>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>      </div>      <div>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>      </div>      <div>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>      </div>      <div>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>            <a href="www.baidu.com">导航条</a>      </div></div>    <!-- logo under -->    <div class="top3_one">      <div class="top_left_one">            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <!--<a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a>            <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行显示傲</span></a> -->            <div id="top_left_one_bottom_div">              <div id="top_left_one_bottom_div_one">                <img src="exam.png"  class="allfloatleft"/>                <div>                    <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行</span></a>                    <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行</span></a>                </div>              </div>              <div id="top_left_one_bottom_div_one">                    <img src="go_out.png"  class="allfloatleft"/>                    <div>                        <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行</span></a>                        <a href="www.baidu.com"><span id="top_left_one_span">导航条测试全行</span></a>                    </div>              </div>            </div>      </div>      <div class="top3_two">            <div class="top3_two_top">                 <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>            </div>            <div><img src="广告.png" class="top3_two_img"/></div>            <div class="top3_two_bottom">                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>                <a href="www.baidu.com"><span id="top3_two_top">导航条测试全行</span></a>            </div>      </div>      <div class="top3_thr">        <div class="top_thr_left">             <img src="exam.png" id="top_thr_left_img"/>            <img src="exam.png" id="top_thr_left_img"/>            <img src="exam.png" id="top_thr_left_img"/>            <img src="exam.png" id="top_thr_left_img"/>        </div>         <div class="top_thr_right">                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>                <a href="www.baidu.com"><span id="top_thr_right_span">导航条测试显示一行</span></a>        </div>      </div>        <div class="top_thr_right">            <img src="右侧广告.png" id="top_thr_right_img"/>        </div>    </div></body></html>

css样式：

.body {    margin:0 auto;    border: 1px solid #0099FF;     width:950px;    height:800px;    font-size:12px;}.allfloatleft{    float:left;}.top{    width:950px;    height:24px;    background:#CC33FF; }.login{    width:350px;    height:22px;    background:#FF99FF;     float:left;    line-height:22px;}.setindex{    width:85px;    height:20px;    background:#FF99FF;    float:left;    margin-left:50px;    line-height:22px;}.myhref{    float:right;    margin-right:5px;    line-height:22px;}.logo{    border:1px solid #CC66FF;}.topicon{    float:left;    margin-top:3px;}.topicon_one{    height:21px;    font-size:16px;    line-height:22px;    margin-top:3px;}.top3_one{    height:232px;    width:949px;    border:1px solid #9933FF;    background:#99CC99;    float:left;}.top_left_one{    width:135px;    height:232px;    border:1px solid #FF00FF;    float:left;}#top_left_one_bottom_div{    height:91px;    width:135px;    border:1px solid #00CC66;}#top_left_one_bottom_div_one{    height:41px;    width:135px;    border:1px solid #00CC66;}#top_left_one_span{    margin-left:5px;    margin-right:5px;    margin-top:3px;    margin-bottom:3px;    line-height:20px;}.top3_two{    height:230px;    width:468px;    float:left;    border:1px solid #6699FF;}.top3_two_top{    width:468px;    height:61px;}#top3_two_top{    margin-left:15px;    margin-right:10px;    line-height:27px;}.top3_two_img{    margin-left:15px;    width:429px;}.top3_two_bottom{    width:468px;    height:64px;    margin-top:18px;}.top3_thr{    width:166px;    height:230px;    border:1px solid #FF9966;    float:left;}.top_thr_left{    height:230px;    width:21px;    float:left;}#top_thr_left_img{     margin-top:15px;    float:left;}.top_thr_right{    width:136px;    height:230px;    margin-top:17px;    float:left;}#top_thr_right_span{    margin-left:15px;    margin-right:10px;    line-height:24px;}.top_thr_right{    margin:0px;    float:left;}#top_thr_right_img{    height:234px;    width:175px;    margin:0px;}

最终自己弄出来的效果图：
右侧教育出国类似的竖排文字标签怎么整。

0 0

第020讲 仿sohu

第020讲仿sohu