13-DIV+CSS-仿搜狐布局(部分)

以你之姓@ 2022-09-18 03:50 47阅读 0赞

放搜狐主页布局  
  
1. 用背景色来标识div所占的空间,而不要用border  
因为border有宽度  
  
2. div是块级元素,要在一行挨个排列,需要左浮动  
  
3. 最右边div的一般是向右浮动  
  
4. css中没有垂直定位,  
可以用<table vlign="middle">来实现

![SouthEast][]

<body>
    
     
     <div class="top">
         <div class="login">登陆界面</div>
         <div class="setIndexPage">设为首页面</div>
         <div class="hrefs">超链接</div>
     </div>
    
     
     <div class="logo"><img src="logo.jpg"/></div>
     
     
     <div class="navigation">导航栏</div>
    
     
     <div class="ads">
         <div class="stuAd">招生广告</div>
         <div class="ad2"></div>
         <div class="ad3"></div>
         <div class="picAd">
            <table vlign="middle" align="center">
                <tr><td><img src="adpic.jpg"/></td></tr>
            </table>
        </div>
     </div>
    
    </body>

<style type="text/css">
            
            body {
                width: 950px;
                /* height: 不指定则自适应 */
                height: 600px;
                margin: 0 auto;
                /*background-color: pink; 用背景色来显示元素所占空间*/
                /*
                 不要用border来显示元素的所占空间,
                 因为border本身也占空间 
                */
                /*border: 1px solid red; */
                font-size: 12px; /*字体一般是12px*/
            }
    
            /*最顶部的部分*/
            .top {
                width: 950px;
                height: 22px;
                background-color: #D3D6D8;
            }
    
            /*登陆部分*/
            .login {
                width: 416px;
                height: 22px;
                background-color: green;
                float: left;
            }
    
            /*设置为主页*/
            .setIndexPage {
                width: 105px;
                height: 22px;
                background-color: gray;
                float: left;
                margin-left: 80px;
            }
    
            /*超链接*/
            .hrefs {
                width: 200px;
                height: 22px;
                float: right;   /*最后一个div往往是向右浮动*/
                background-color: gray;
            }
    
            /*logo*/
            .logo {
                width: 137px;
                height: 68px;
                background-color: #FFD205;
                float: left;
                margin-top: 5px;
            }
            /*logo pic*/
            .logo img{
                width: 137px;
                height: 68px;
            }        
    
            /*导航栏*/
            .navigation {
                width: 807px;
                height: 68px;
                background-color: #FFEA8E;
                float: left;
                margin-left: 5px;
                margin-top: 5px;
            }
    
            /*广告*/
            .ads {
                width: 948px;
                height: 212px;
                /*background-color: #6CC15F;*/
                float: left; 
                margin-top: 5px;
                border: 1px solid gray;
            }
            
            /*招生广告*/
            .stuAd {
                width: 132px;
                height: 200px;
                background: pink;
                float: left;
                margin-left: 5px; 
                margin-top: 5px;
            }
    
            .ad2 {
                width: 460px;
                height: 200px;
                float: left;
                background-color: pink;
                margin-left: 5px; 
                margin-top: 5px;            
            }
            
            .ad3 {
                width: 150px;
                height: 200px;
                float: left;
                background-color: pink;
                margin-left: 5px; 
                margin-top: 5px;            
            }
    
            .picAd {
                width: 180px;
                height: 212px;
                float: right;
                /*background-color: pink;*/
                border-left: 1px solid gray; /*打开隔线效果*/
                /*
                 水平居中
                */
                text-align: center; 
            }
    
            /*
                CSS中没有垂直居中, 
                因此,可以使用 table的垂直居中和水平居中
            */
            
    
    
        </style>

[SouthEast]: /images/20220828/fb425181765d442395474df23eb3324c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 129 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 137 阅读

相关 DIVCSS技术如何入门

css是cascading style sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页

我会带着你远行/ 2024年04月03日 09:30/ 0 赞/ 122 阅读

相关 13-DIV+CSS-仿搜狐布局(部分)

放搜狐主页布局 1. 用背景色来标识div所占的空间,而不要用border 因为border有宽度 2. div是块级元素,要在一行挨个排列,需要左浮动

以你之姓@/ 2022年09月18日 03:50/ 0 赞/ 48 阅读

相关 CSS实战手册_阅读笔记13_布局_css布局

![Center][] [Center]: /images/20220810/853918eeae414d54bc07a73e1703e3dc.png

红太狼/ 2022年08月14日 00:54/ 0 赞/ 170 阅读

相关仿天猫双12主页广告部分

运用了Bootstrap来布局 ![这里写图片描述][SouthEast] 1. 该部分分为左右两块DIV 左DIV实现的是鼠标移动到下方的一个轮播图上的

我会带着你远行/ 2022年07月14日 15:53/ 0 赞/ 184 阅读

相关仿天猫双12主页广告部分

运用了Bootstrap来布局 ![这里写图片描述][SouthEast] 1. 该部分分为左右两块DIV 左DIV实现的是鼠标移动到下方的一个轮播图上的

灰太狼/ 2022年07月14日 15:53/ 0 赞/ 214 阅读

相关搜狐齐全的笔试题

SOHU公司的面试题目，今天在我的旁边的复印机器上面不知道是谁打印出来的。是刚出来没有多长时间，可能明天面试人员的考试题目吧！！！！发给大家看看啊！！！希望对大家有帮助。。。

àì夳堔傛蜴生んèń/ 2022年07月13日 07:28/ 0 赞/ 107 阅读

相关算法--2016搜狐面试：搜狐员工放假了，都玩什么？

扎金花这种小游戏，我想作为一名程序员。大部分小时候都玩过吧！现在我们一起来看看搜狐这道面试题吧！看看如何用代码实现扎金花。 -------------------- Q题

灰太狼/ 2022年06月14日 00:42/ 0 赞/ 67 阅读

相关 React-全家桶仿简书部分功能

[前言][Link 1] > 前段时间接触了下React，一直想要自己写一个小Demo练手。在众多应用中，考虑之后选择了简书来模仿，这段时间就利用了工作之余的时间进行开发

素颜马尾好姑娘i/ 2022年05月01日 13:20/ 0 赞/ 237 阅读