HTML布局之CSS

最新推荐文章于 2022-04-07 10:35:04 发布

靳小霞

最新推荐文章于 2022-04-07 10:35:04 发布

阅读量247

点赞数

分类专栏： Html5 CSS 文章标签：布局 css html

本文链接：https://blog.csdn.net/u012493556/article/details/52748314

版权

CSS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css</title>
    <style type="text/css">
         a{
        font-family: Verdana,sans-serif;
        font-weight: bold;
        text-decoration: none;
     }
        a:link{
            color:black;/*链接未被访问时的样式*/

        }
        a:visited{
            color: green;/*链接被访问过且存在于浏览器的内存中的超链接的样式*/
        }
        a:hover{
            color:red;/*鼠标停留在某个超链接上的样式*/ 
        }
        a:active{
            color: blue;/*鼠标点击超链接但并未被释放时的超链接的样式*/
        }
        #top{
            width: 100%;
            height: 100px;
            background-color: blue;
        }
        #main{
            width: 100%;
            height: 500px;
            background-color: blue;
            margin: 1px;
        }
        #mianleft{
            width: 25%;
            height: 500px;
            background-color: red;
            position: relative;
            float: left;
        }
        #mainmain{
            width: 50%;
            height:500px;
            background-color: white;
            position: relative;
            float: left;
        }
        #mainright{
            width: 25%;
            height: 500px;
            background-color: red;
            position: relative;
            float: left;
        }
        #bottom{
            width: 100%;
            height: 50px;
            background-color: red;
            margin-top: 1px;
            overflow: scroll;
        }

     #product_left{
          margin-top: 50px;
          margin-left: 20px;
          margin-bottom: 100px;
          position: relative;
          float: left;
          width: 200px;
          height: 400px;

     }
     #product_main{
          margin-top: 50px;
          margin-left: 2px;
          margin-bottom: 100px;
          position: relative;
          float: left;
          width: 200px;
          height: 400px;

     }
     #product_right{
          margin-top: 50px;
          margin-left: 2px;
          margin-right: 20px;
          margin-bottom: 100px;
          position: relative;
          float: left;
          width: 200px;
          height: 400px;

     }
   .imgg{
    width: 100%;
    background-color: green;
    height:70%;

   }
  .discrition{
    background-color: blue;
    height: 30%;
  }


    </style>

</head>
<body >
<a href="http://www.baidu.com" >百度</a>
<div id="top">顶部
</div>
<div id="main">
        <div id="mianleft">左</div>
        <div id="mainmain">
            <div id="product_left">
                <div class="imgg"></div>
                <div class="discrition" ></div>
            </div>
            <div id="product_main">
                <div class="imgg"></div>
                <div class="discrition" ></div>
            </div>
            <div id="product_right">
                <div class="imgg"></div>
                <div class="discrition" ></div>
            </div>

        </div>
        <div id="mainright">右</div>
</div>
<div id="bottom">底部</div>
</body>
</html>

靳小霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML布局之CSS

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css</title> <style type="text/css"> a{ font-family: Verdana,sans-serif; font-weight: bold; text-
复制链接

扫一扫