css小例子

最新推荐文章于 2020-06-23 00:15:50 发布

醉小义

最新推荐文章于 2020-06-23 00:15:50 发布

阅读量217

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_30638831/article/details/88912133

版权

前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

1. 新闻

在这里插入图片描述
代码:



<!DOCTYPE html >
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow</title>
	<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box {
            width: 600px;
            height: 500px;
            border: 1px solid #aaa;
            margin: 0 auto;
            margin-top: 20px;
            border-top:5px solid blue;
        }

        div .title {
            margin: 20px 20px 0px 20px;
            /* background-color: red; */
          
            text-align: center; /* 运用父级居中 */
            border-bottom:1px solid #CCCCCC;
        }
        .title h2 {
            font-weight: normal;
            margin-bottom: 5px;
        }

        .title h6 {
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 5px;
        }

        div .content {
            margin:0 auto;
            width: 500px;
            height: 295px;

            margin-top: 10px;
        }

        span {
            font-size: 12px;
            font-weight: normal;
            color:#990000;

        }

	</style>
</head>
<body>
    
    <div class="box">
        <div class="title">
            <h2>大话西游2</h2>
            <h6>2019年01月02日 18:19 <span>网易新闻</span>（106712人参与） 收藏本文</h6>
        </div>

        <div class="content">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553937018724&di=e8b91d301733d2575d7b9d2cad8e58da&imgtype=0&src=http%3A%2F%2Fimages.17173.com%2F2015%2Fnews%2F2015%2F06%2F29%2Fmj0629bs01s.jpg">
        </div>
    </div>
  
</body>
</html>

个人资料

在这里插入图片描述



<!DOCTYPE html >
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow</title>
	<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box {
            width: 200px;
            height: 359px;
            border: 1px solid #aaa;
            margin: 10px auto;
        }

        .box .title {
            background-color: #aaa;
            padding: 3px;
        }

        .box .poto {
            border: 2px solid #aaa;
            margin: 10px auto;
            width: 160px;
            height: 160px;
           
        }

        .box .poto img {
            border-radius: 16px;
        }

        .box .soft {
            text-align: center;
            border-bottom:1px dotted #aaa;
            padding-bottom: 10px;
        }

        .friend{
            text-align:center;
            padding-top:20px;
		}
        .friend input{
            width:67px;
            height:21px;
            outline-style:none;
            margin-bottom:5px;
        }
       

	</style>
</head>
<body>
    
    <div class="box">
       <div class="title">个人资料 </div>
       
       <div class="poto"> 
            <img
                width="160px" 
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553938225934&di=0f6125565e6b2e9be4349047897a8993&imgtype=0&src=http%3A%2F%2Fimgtu.5011.net%2Fuploads%2Fcontent%2F20170301%2F4167621488340521.jpg">
        </div>

        <div class="soft">
            <span > 醉小义 </span> <br />
            <button style="margin-top:3px">大话西游2</button>
        </div>

        <div class="friend">
                <input type="button" value="一世朋友">
                <input type="button" value="大话西游2">
                <input type="button" value="一路有你">
                <input type="button" value="粉丝">
           </div>

    </div>
  
</body>
</html>

3. 新闻简介

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <style >
        *{
            margin: 0px;
            padding: 0px;
        }
        .box {
            height: 300px;
            width: 200px;
            background-image:url('bg.gif');
            border: solid 1px #009900;
            margin: 0 auto;
        }

        .title {
            color:whitesmoke;
            margin: 10px;
            border-left: #009900 5px solid;
            font-family: "微软雅黑";
            padding-left: 5px;
            font-size: 16px;
            line-height: 30px
        }

        .content {
            width: 180px;
            height: 243px;
            background-color: white;
            margin: 0 auto;
            overflow: hidden;
         }

         ul li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed #666666;
            padding-left: 10px;
            background-image: url('tb.gif');
            background-repeat: no-repeat;
            background-position: left center

         }
         ul li a{
             text-decoration: none;
         }

		/*另一种

			*{
				margin:0;
				padding:0;

			 }

			 ul li{
			 	 list-style:none;
			 }
			.box{
				 width:240px;
				 height:167px;
				 border:1px solid #d9e0ee;
				 border-top:2px solid #ff8400;
				 margin:10px auto;
			}

			.title{
				 border-bottom:1px solid #d9e0ee;
				 height:36px;
				 line-height:36px;
				 padding-left:20px;
			}

			.content li{

				 background-image:url("li_bg.jpg");
				 background-repeat:no-repeat;
				 background-position:left center;
				 padding-left:10px;
				 line-height:20px;
			}

			.content ul{
				margin-left:10px;
				margin-top:10px;
			}

			.content a{
				 color:#666666;
				 font-size:14px;
				 text-decoration:none;
			}

			.content a:hover{
				color:#DB6B12;
				text-decoration:underline;
			}

*/
    </style>
<body>
    
    <div class="box">
        <div class="title">
            大话西游2
        </div>

        <div class="content">
            <ul class="list">
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
                <li><a href="#">飞剑侠</a></li>
            </ul>
        </div>

    </div>
</body>
</html>

醉小义

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css小例子

1. 新闻代码:<!DOCTYPE html ><html lang="en"><head> <meta charset="UTF-8"> <title>overflow</title> <style type="text/css"> *{ margin:...
复制链接

扫一扫