刚html刚讲完马上就接着css，周末的任务就是高仿案例，结果有点遭

图文布局 代码

css（内部样式）

html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报刊</title>
    <style type="text/css">
       body{
         background-color: gray;
       }
       .all{
            width: 980px;
            height: 1386px;
            margin: 0 auto;
            padding-left: 49px;
            padding-right: 49px;
            background-color: white;
        }
/*导航栏*/
        .nav{
            height: 63px;
            /*background-color: blue;*/
        }
        .nav .logo{
            float: left;
            width: 110px;
            height: 61px;
            background-color: red;
        }
        .nav .logo .title{
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          padding-top: 45px;
        }
        .nav .time{
            float: right;
            font-size: 12px;
            color: #d45d5c;
            padding-top: 47px
        }
        .nav .nav-hr{
            width: 980px;
        }

/* news1 */
        .news1{
            height: 301px;
            margin-top: 30px;
        }
        .news1 .img1{
            float: left;
            width: 641px;
            height: 301px;
            background: url(images/123.jpg) no-repeat center;
            /*background-color: yellow;*/
        }
        .news1 .img1 .left-tm{
            width: 191px;
            height: 301px;
            background-color:rgba(0,0,0,0.3); /*设置透明度*/
            float: left;
        }
        .news1 .img1 .right-tm{
            width: 191px;
            height: 301px;
            background-color:rgba(0,0,0,0.3); /*设置透明度*/
            float: right;
        }
        .news1 .about{
            float: right;
            width: 230px;
            height: 301px;
            /*background-color: pink;*/
        }
        .news1 .about .lab1{
            font-size: 24px;
            color: #000000;
            line-height: 40px;
            text-decoration: underline;
        }
        .news1 .about .lab2{
            font-size: 24px;
            color: #000000;
            line-height: 40px;
            text-decoration: underline; /*添加下划线*/
        }
        .news1 .about .lab3{
            font-size: 12px;
            color: #676767;
            line-height: 10px;
        }
        .news1 .about .lab4{
            font-size: 116px;
            color: #75b86b;
            line-height: 120px;
            text-decoration: underline; /*添加下划线*/
        }
        .news1 .about .lab5{
            font-size: 55px;
            color: #cc8091;
        }
        .news1 .about .end-lab{
            width: 120px;
            height: 30px;
            float: right;
            padding-top: 15px;
            color: #cc8091;
        }
/*  news2  */
        .news2 {
          height: 250px;
          margin-top: 30px;
          /*background-color: green;*/
        }
        .news2 .n2-what{
          float: left;
          width: 200px;
          height: 250px;
          /*background-color: red;*/
        }
        .news2 .n2-what .what1{
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          color: #d2994f;
          text-decoration: underline;
        }
         .news2 .n2-what .what2{
          font-size: 12px;
          color: #231815;
          line-height: 16px;
         }

.news2 .n2-when{
          float: left;
          width: 200px;
          height: 250px;
          padding-left: 20px;
          /*background-color: red;*/
        }
        .news2 .n2-when .when1{
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          color: #d2994f;
          text-decoration: underline; /*添加下划线*/
        }
         .news2 .n2-when .when2{
          font-size: 12px;
          color: #231815;
          line-height: 16px;
         }

.news2 .n2-how{
          float: left;
          width: 200px;
          height: 250px;
          padding-left: 20px;
          /*background-color: red;*/
        }
        .news2 .n2-how .how1{
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          color: #d2994f;
          text-decoration: underline; /*添加下划线*/
        }
         .news2 .n2-how .how2{
          font-size: 12px;
          color: #231815;
          line-height: 16px;
         }
 /*  news3  */
        .news-left{
          width: 50%;
          height: 600px;
          margin-top: 30px;
          padding-right: 30px;
          /*background-color: red;*/
        }
        .news-left .n-l-div{
          height: 170px;
          /*background-color: green;*/
        }
        .news-left .n-l-div .n-l-title1{
          font-size: 72px;
          font-weight: bold; /*粗体字*/
          color: #f5e327;
        }
        .news-left .n-l-div .n-l-title2{
          font-size: 42px;
          font-weight: bold;
          line-height:16px;
          color: #11456b;
        }
        .news-left .n-l-div .n-l-title3{
          font-size: 33px;
          font-weight: bold;
          color: #11456b;
        }
        .news-left .n-l-div2{
          width: 70px;
          height: 70px;
          float: left;
          font-size: 70px;
          color: #f5e327;
        }
        .news-left .n-l-div3{
          width: 420px;
          float: left;
        }
        .news-left .n-l-div4{
          width: 300px;
          height: 270px;
          float: left;
        }
        .news-left .n-l-div5{
          height: 270px;
          float:left;
        }.news-left .n-l-div6{
          float:left;
        }
        .news-left .t{
          font-size: 12px;
          color: #767777;
          line-height: 16px;
        }

.news-right{
          width: 50%;
          height: 600px;
          margin-top: -600px;
          float: right;
          /*background-color: yellow;*/
        }
        .news-right .n-r-div1{
          width: 100%;
          height: 275px;
          background: url(images/789.png) no-repeat center;
          /*background-color: blue;*/
        }
        .news-right .n-r-div1 .img-tm{
          float: left;
          width: 100%;
          height: 61px;
          line-height: 61px;
          text-align: center;
          background-color: rgba(0,0,0,0.5);
          /*position: relative;*/
          padding-top: 211px;
        }
 
        .news-right .n-r-div1 .n-r-lab1{
          font-size: 26px;
          color: #ffffff;
        }
        .news-right .n-r-div1 .n-r-lab2{
          font-size: 12px;
          color: #72b16a;
          word-spacing: 140%;
        }

.news-right .n-r-div2{
          width: 95%;
          height: 310px;
          margin: 10px;
          background-color: skyblue;
        }
        .news-right .n-r-div2 .div2-1{
          padding-top: 10px;
          font-size: 16px;
          line-height:20px;
          color: #5a5b5b;
        }
        .news-right .n-r-div2 .div2-2{
          width: 60%;
          height: 60%;
          float: left;
          margin-top: 20px;
          color: #ffffff;
          background-color: red;
        }
        .news-right .n-r-div2 .div2-2 .div2-2-1{
          width: 100px;
          height: 150px;
          padding-top:50px;
          float: left;
          font-size: 110px;
          text-align: center;
          /*background-color: green;*/
        }
        .news-right .n-r-div2 .div2-2 .div2-2-2{
          padding-top: 50px;
        }
        .news-right .n-r-div2 .div2-2 .div2-2-2 .sp-1{
          font-size: 21px;
          line-height: 24px;
        }
        .news-right .n-r-div2 .div2-2 .div2-2-2 .sp-3{
          font-size: 12px;
          line-height: 6px;
        }

.news-right .n-r-div2 .div2-3{
          padding:10px;
        }
        .news-right .n-r-div2 .div2-3 .bb{
          font-size: 72px;
          color: #d45d5c;
        }
        .news-right .n-r-div2 .div2-3 .ll{
          font-size: 14px;
          color: #5a5b5b;
          line-height: 16px;
        }

.footer .footer-item{
          float: right;
          font-size: 12px;
          color: #d45d5c;
        }

</style>

</head>
<body>

<div class="all">
   <div  class="nav">
      <div class="logo">
          <div class="title">
          <span>ife.baidu.com</span>
        </div>
      </div>
      <div class="time">
          <span>2016.03</span>
      </div>
      
      <!--添加横线-->
      <hr style="border:2px solid #938e8c" class = "nav-hr">
   </div>

<div class="news1">
      <div class="img1">
          
          <!--要来构造背景为半透明的盒子-->
         <div class="left-tm"></div>
         <div class="right-tm"></div>
      </div>
      
      <div class="about">
           <hr style="border:2px solid #cc8091" class="about-hr">
           <span class="lab1">ABOUT</span><br>
           <span class="lab2">TECHNOLGE</span><br>
           <span class="lab3">About techoologe About techoologe About techoologe </span><br>
           <span class="lab4"><em>700</em></span><br>
           <span class="lab5">3.2</span>
           <div class="end-lab">
               <span class="lab6">WEB</span><br>
               <span class="lab7">html css js</span>
           </div>
          
      </div>       
   </div>

<div class="news2">
          <div class="n2-what">
                <span class="what1">What</span><br><br>
                <span class="what2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br>
          </div>

<div class="n2-when">
                <span class="when1">When</span><br><br>
                <span class="when2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br>
          </div>

<div class="n2-how">
                <span class="how1">How</span><br><br>
                <span class="how2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br><br>
          <div class="h-wwh">
             <span class="what">What.......................%30</span><br>
             <span class="when">When.......................%50</span><br>
             <span class="how">How.........................%20</span><br>
          </div>
          
          </div>
   </div>

<div class="news-left">
          <div class="n-l-div">
          <span class="n-l-title1"><em>THE</em></span>
          <span class="n-l-title2">TECHNOLGE OF FRONT</span><br>
          <span class="n-l-title3">前端技术邻域</span>
          <hr style="border:2px solid #11456b" class="n-l-hr">
       </div>
       <div class="n-l-div2">剑</div>
       <div class="n-l-div3 t">
       hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf
       hello 剑 bigerf
       </div>
       <div class="n-l-div4 t">
        hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑
       </div>
       <div class="n-l-div5">
        <img src="data:images/456.jpeg" alt="图片加载失败" width="180" height="270">
       </div>
       <div class="n-l-div6 t">
       hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf
       </div>
   </div>

<div class="news-right">
     <!-- image -->
         <div class="n-r-div1">
         <div class="img-tm">
            <!-- <hr style="border:44px solid #72b16a" class="n-r-hr"> -->
            <span class="n-r-lab1">前端技术</span>
            <span class="n-r-lab2"><em>前端技术保你前途无忧</em></span>
         </div>
      </div>

<div class="n-r-div2">
         <div class="div2-1">
            <!-- <img src="data:images/789.png" width="450" height="200"> -->
            <ul>
               <li>HTML.............................................................................结构</li>
               <li>CSS................................................................................样式</li>
               <li>JavaScript....................................................................交互</li>
            </ul>
         </div>

<div class="div2-2">
             <div class="div2-2-1">O</div>
             <div class="div2-2-2">
                 <span class="sp-1"><em>ONE TWO</em></span><br>
                 <span class="sp-1"><em>THREE FORE FIVE</em></span><br>
                 <span class="sp-3">hello bigerf hello bigerf hello bigerf hello bigerf</span>
             </div>
         </div>

<div class="div2-3">
            <span class="bb">“</span>
            <span class="ll"> hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello</span>
            <span class="bb">”</span>
         </div>
      </div>
   </div>

<div class="footer">
         <!--横线-->
      <hr style="border:2px solid #938e8c" class = "footer-hr">
      <div class="footer-item">
        <span>ife.baidu.com</span>
      </div>
   </div>

</div>

</body>
</html>

陌陌说：刚开始的时候就是个打击，可后来学习更深了，觉得这还是冰山一角的一角而已

HTML+CSS 基础布局（案列一）的更多相关文章

  1. CSS基础布局

    目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...

  2. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  3. 简单的CSS网页布局--一二列布局

    1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang=& ...

  4. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  5. CSS基础 布局

    1.布局的基本位置 top         距离上边的距离right       距离右边的距离bottom   距离下边的距离left         距离左边的距离 去掉布局时 html 的3mm ...

  6. CSS伸缩布局

    1. 伸缩布局应用: 伸缩布局应用 主轴: Flex容器的主轴用来配置Flex项目,默认是水平方向 侧轴: 与主轴垂直的轴称为侧轴,默认还是垂直方向 方向: 默认是主轴从左向右, 侧轴默认是从上到下 ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  9. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

随机推荐

  1. SAP ABAP 的经常使用debug方式

    SAP ABAP 的经常使用debug方式: 1. 直接在程序中设断点 在se38里面打上breakpoint,程序执行到该处即进入debug模式 2.background Job的debug 进入S ...

  2. ubuntu语言设置成汉语

    打开设置system setting,进入语言支持,有语言和地区格式.下载须要的语言并应用到整个系统. 按说明来就可以 这样的方法使得部分英语变为汉语.

  3. Android内存泄露之开篇

    先来想这三个问题 内存泄露是怎么回事 内存会泄露的原因 避免内存泄露 1.内存泄露怎么回事 一个程序中,已经不须要使用某个对象,可是由于仍然有引用指向它垃圾回收器就无法回收它,当然该对象占用的内存就无 ...

  4. HDU2577 How to Type【DP】

    题目链接: pid=2577">http://acm.hdu.edu.cn/showproblem.php? pid=2577 题目大意: 给你一个仅仅包括大写和小写字母的字符串,如今 ...

  5. Windows命令实现匿名邮件发送

    在日常工具开发中,常常会有发送邮件的需求.在一些高级语言中,如Python.C#中,都有专门的邮件发送模块,如Python 中的 smtplib 模块.那么.一封邮件究竟是怎样发送到一个特定的邮箱呢? ...

  6. 自己定义ViewGroup控件（一）-----&gt;流式布局进阶（一）

    main.xml <? xml version="1.0" encoding="utf-8"?> <com.example.SimpleLay ...

  7. 常用Lunix命令

    计算机 1.硬件系统 输入单元.输出单元.算术逻辑单元.控制单元.记忆单元 中央处理单元:CPU(算术逻辑单元.控制单元) 电源.主板.CPU.内存(RAM).硬盘.(声卡.显卡.网卡)(集成在主板上 ...

  8. Google's Hybrid Approach to Research

    文档地址:戳我 总结: (i) aims to generate scientific and engineering advances in fields of import to Google, ...

  9. (转)web会话管理方式

    阅读目录 1. 基于server端session的管理 2. cookie-based的管理方式 3. token-based的管理方式 4. 安全问题 5. 总结 http是无状态的,一次请求结束, ...

  10. 2015-2016 ACM-ICPC Pacific Northwest Regional Contest (Div. 2) S Surf

    SurfNow that you've come to Florida and taken up surng, you love it! Of course, you've realized that ...