仿搜狐首页的布局

第一步，搭建布局框架

body {
    width: 950px;
    height: 800px;
    margin: 0 auto;
    /*background: pink;*/
    border: 1px solid red;
    font-size: 12px;
}

.top {
    width: 950px;
    height: 22px;
    background: pink;
}

/*登录部分*/

.login {
    width: 416px;
    height: 22px;
    background: greenyellow;
    float: left;
}

.index {
    width: 105px;
    height: 22px;
    background: orange;
    float: left;
    /*与左边的距离*/
    margin-left: 50px;
}

.myhref {
    width: 280px;
    height: 22px;
    float: right;
    background: goldenrod;
}

.logo {
    width: 137px;
    height: 68px;
    background: yellow;
    float: left;
    /*与上边的距离*/
    margin-top: 5px;
}

.daohang {
    width: 807px;
    height: 68px;
    float: left;
    margin-left: 3px;
    background: green;
    margin-top: 5px;
}

.ad {
    width: 950px;
    height: 212px;
    background: pink;
    margin-top: 5px;
    /*一定要走浮动*/
    float: left;
}

.stuad {
    width: 126px;
    height: 196px;
    background: gray;
    float: left;
    margin: 5px 0 0 4px;
}

.ad2 {
    width: 453px;
    height: 196px;
    margin: 5px 0 0 15px;
    background: red;
    float: left;
}

.ad3 {
    height: 196px;
    width: 150px;
    background: green;
    margin: 5px 0 0 12px;
    float: left;
}

.pic {
    height: 212px;
    width: 180px;
    float: right;
    background: grey;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/souhu.css" />
    </head>

    <body>
        <!--最上面的布局-->
        <div class="top">
            <div class="login">登录</div>
            <div class="index">设为首页面</div>
            <div class="myhref">链接</div>
        </div>
        <!--logo-->
        <div class="logo">logo</div>
        <div class="daohang">导航</div>
        <!--广告部分-->
        <div class="ad">
            <div class="stuad">学生广告</div>
            <div class="ad2">ad2</div>
            <div class="ad3">房地产广告</div>
            <div class="pic">图片广告</div>
        </div>
    </body>

</html>

第二步，一点一点的向里面加东西

body {
    width: 950px;
    height: 800px;
    margin: 0 auto;
    /*background: pink;*/
    border: 1px solid red;
    font-size: 12px;
}

.top {
    width: 950px;
    height: 22px;
    /*background: pink;*/
}

/*登录部分*/

.login {
    width: 416px;
    height: 22px;
    background: greenyellow;
    float: left;
}

.index {
    width: 105px;
    height: 22px;
    background: orange;
    float: left;
    /*与左边的距离*/
    margin-left: 50px;
}

.myhref {
    width: 280px;
    height: 22px;
    float: right;
    background: goldenrod;
}

.logo {
    width: 137px;
    height: 68px;
    background: yellow;
    float: left;
    /*与上边的距离*/
    margin-top: 5px;
}
.logo img{
    width: 137px;
}
.daohang {
    width: 807px;
    height: 68px;
    float: left;
    margin-left: 3px;
    background: green;
    margin-top: 5px;
}

.ad {
    width: 950px;
    height: 212px;
    /*background: pink;*/
    margin-top: 5px;
    /*一定要走浮动*/
    float: left;
    border: 1px solid silver;
}

.stuad {
    width: 126px;
    height: 196px;
    background: gray;
    float: left;
    margin: 5px 0 0 4px;
}

.ad2 {
    width: 453px;
    height: 196px;
    margin: 5px 0 0 15px;
    background: red;
    float: left;
}

.ad3 {
    height: 196px;
    width: 150px;
    background: green;
    margin: 5px 0 0 12px;
    float: left;
}

.pic {
    height: 212px;
    width: 180px;
    float: right;
    /*background: grey;*/
    border-left: 1px solid silver;
    /*图片居中*/
    text-align: center;
}
.pic img{
        height: 190px;
        margin: 12px;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/souhu.css" />
    </head>

    <body>
        <!--最上面的布局-->
        <div class="top">
            <div class="login">登录</div>
            <div class="index">设为首页面</div>
            <div class="myhref">链接</div>
        </div>
        <!--logo-->
        <div class="logo"><img src="img/index.jpg"/></div>
        <div class="daohang">导航</div>
        <!--广告部分-->
        <div class="ad">
            <div class="stuad">学生广告</div>
            <div class="ad2">ad2</div>
            <div class="ad3">房地产广告</div>
            <div class="pic"><img src="img/ad2.jpg"></div>
        </div>
    </body>

</html>

原文地址：https://www.cnblogs.com/helloworld2019/p/10911031.html

时间： 2024-10-24 14:38:02

仿搜狐首页的布局的相关文章

jquery仿搜狐投票动画代码

体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比例做左右移动(正方何问起,反方何雯琪).移动动画效果平滑自然.具有非常好的用户体验.该源码兼容目前最新的各类主流浏览器. 另外实现了投票的效果. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"

基于jQuery仿搜狐辩论投票动画代码

基于jQuery仿搜狐辩论投票动画代码.这是一款个性的卡通小人正方反方辩论投票特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <script type="text/javascript"> $(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, left: "250px" }, 10

仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）

请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray fo

一个仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图类库

前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 一个仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图类库, github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray for viewpager, banner 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图专业轮播图库,没有之一也可以应用于广告

Listview嵌套Viewpager实现仿淘宝搜狐广告主页，并实现listview的下拉刷新

Android实现功能:Listview嵌套viewpager仿淘宝搜狐视频主页面,和listview的下拉刷新. 什么都不说了:直接上图说效果 listview嵌套viewpager实现仿淘宝的广告滑动主页面源码连接:(http://download.csdn.net/detail/qq_30000411/9528977) APK下载连接:(http://download.csdn.net/detail/qq_30000411/9528973) 下面给出我源码的主要文件构成: MyListV

新闻网站电脑版带手机版源码，仿东方头条，今日头条，搜狐自媒体网站帝国cms定制

专业定制新闻网站,仿东方头条,今日头条,搜狐自媒体网站源码开发,支持二级域名显示,新闻资讯聚合的头条新闻资讯,内容包括今日头条.头条新闻.社会热点.国内国际快讯.军事.明星.八卦.娱乐.时尚.体育等各类别的头条新闻资讯.支持电脑版+手机版+微信版+小程序版+APP版,由10年的技术团队专业定制,需要的朋友可以联系我们. 网站采用:PHP+MySQL+thinkPHP框架(可定制) ?演示网电脑版:www.jiaodiankan.com ??演示网手机版:m.jiaodiankan.com 联系我

新浪搜狐网易等那些老牌互联网公司现在都怎样了?

对互联网企业来说,十年可以改变很多,可以改变人们的上网习惯,可以改变人们的上网需求,十年甚至可以让主流用户都换了一代,十年是个坎.从2005年到2015年,有些老牌互联网企业陷入十年魔咒,日渐式微,走向没落. 对于国内互联网企业来说,十年可以改变很多,可以改变人们的上网习惯,可以改变人们的上网需求,十年甚至可以让主流用户都换了一代,十年是个坎.从2005年到2015年,有些老牌互联网企业陷入十年魔咒,日渐式微,走向没落.但也不乏一些老牌但不老化的企业,或厚积薄发后一日千里,或稳扎稳打,愈加强大.

Android 模仿搜狐新闻的ViewpagerIndicator

好久没写博客了,今天没事怒更一记. 如标题今天我们来模仿一下搜狐新闻,先上个效果图. 效果图上完之后再上个博客,我也是从这里得到的启发http://blog.csdn.net/qibin0506/article/details/42046559 1,接下来我们就来分析一下这个效果下面的内容应该是用viewpager,头部的选项卡我们用一个LinearLayout+HorizontalScrollView也可以实现,滚动效果的话我们可以用到我们学会的scrollTo,大致的思路理清,我们就开始码

使用css和html模仿搜狐页面

最近在有学习了下css+html,利用css+html写模仿写下了搜狐布局的一部分首先创建一个html文件,命名为sohu.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>sohu.html</title> <meta http-equiv="keywords&quo