你的位置:首页 > 网页设计

[网页设计]HTML+CSS 基础布局(案列一)


刚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 >
   <div  >
      <div >
          <div >
          <span>ife.baidu.com</span>
        </div>
      </div>
      <div >
          <span>2016.03</span>
      </div>
      
      <!--添加横线-->
      <hr class = "nav-hr">
   </div>
   

   <div >
      <div >
          
          <!--要来构造背景为半透明的盒子-->
         <div ></div>
         <div ></div>
      </div>
      
      <div >
           <hr >
           <span >ABOUT</span><br>
           <span >TECHNOLGE</span><br>
           <span >About techoologe About techoologe About techoologe </span><br>
           <span ><em>700</em></span><br>
           <span >3.2</span>
           <div >
               <span >WEB</span><br>
               <span >html css js</span>
           </div>
          
      </div>       
   </div>


   <div >
          <div >
                <span >What</span><br><br>
                <span >你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br>
          </div>

          <div >
                <span >When</span><br><br>
                <span >你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br>
          </div>

          <div >
                <span >How</span><br><br>
                <span >你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br><br>
          <div >
             <span >What.......................%30</span><br>
             <span >When.......................%50</span><br>
             <span >How.........................%20</span><br>
          </div>
          
          </div>
   </div>


   <div >
          <div >
          <span ><em>THE</em></span>
          <span >TECHNOLGE OF FRONT</span><br>
          <span >前端技术邻域</span>
          <hr >
       </div>
       <div >剑</div>
       <div >
       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 >
        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 >
        <img src="images/456.jpeg" alt="图片加载失败" width="180" height="270">
       </div>
       <div >
       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 >
     <!-- image -->
         <div >
         <div >
            <!-- <hr > -->
            <span >前端技术</span>
            <span ><em>前端技术保你前途无忧</em></span>
         </div>
      </div>

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

         <div >
             <div >O</div>
             <div >
                 <span ><em>ONE TWO</em></span><br>
                 <span ><em>THREE FORE FIVE</em></span><br>
                 <span >hello bigerf hello bigerf hello bigerf hello bigerf</span>
             </div>
         </div>

         <div >
            <span >“</span>
            <span > hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello</span>
            <span >”</span>
         </div>
      </div>
   </div>

   <div >
         <!--横线-->
      <hr class = "footer-hr">
      <div >
        <span>ife.baidu.com</span>
      </div>
   </div>




</div>

</body>
</html>

 

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