第020讲仿sohu

最新推荐文章于 2024-06-27 18:31:19 发布

有时有晌

最新推荐文章于 2024-06-27 18:31:19 发布

阅读量262

点赞数

分类专栏： PHP入门到精通系列学习笔记

本文为博主原创文章，未经博主允许不得转载，如需强制转载，请注明出处且需对文章进行评论声明转载。

本文链接：https://blog.csdn.net/u014449096/article/details/53899291

版权

PHP入门到精通系列学习笔记专栏收录该内容

77 篇文章 1 订阅

订阅专栏

样式代码：

<!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

收藏

觉得还不错? 一键收藏
打赏
0
评论
第020讲仿sohu

样式代码：<!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="Conte
复制链接

扫一扫