利用css样式选择器完成html网页编写

最新推荐文章于 2021-08-04 08:06:03 发布
最新推荐文章于 2021-08-04 08:06:03 发布
阅读量591 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49722641/article/details/108249516
版权

css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
        }
        body, button, input, select, td, textarea a {
			font: 12px Tahoma,Verdana,Arial,Helvetica,"\5b8b\4f53",sans-serif;
			color: red;
        }
		a{
            text-decoration: none;
            /*text-decoration: none 设置a标签无下滑线*/
        }
		.head-box{
            background-color: #2459a2;
            height: 44px;
            width: 100%;
            position: fixed;
			/*position: fixed 默认top left为0*/
            top:0;
            left: 0;
        }
        .head-content{
            background-color: #2459a2;
            margin: 0 auto;
            /*margin: 0 auto 为居中*/
            width: 1016px;
            height: 44px;
            line-height: 44px;
            /*line-height: 44px设置行高*/
			position: relative;
        }
        .logo{
            background: url("images/logo.png") no-repeat 0 0;
            height: 23px;
            width: 121px;
			float: left;
            margin-top: 11px;
			<!--display: inline-block;-->
			/*内联标签不可以设置长宽，除非设置float或者display*/
        }
		.action-menu{
            float: left;
            margin-left:20px;
        }
        .action-menu a.tb{
            color: #c0cddf;
            margin-left:-5px;
            padding: 0 13px 0 13px;
            display: inline-block;
        }
        .action-menu a.tb:hover{
            color: #fff;
            background-color: #c0cddf;
        }
        .action-menu a.active,.action-menu a.active:hover{
			color: #fff;
			background-color: #204982;
        }
        .key-search{
            float: right;
            margin-top: 5px;
        }
        .key-search .search-txt,.key-search  a.i{
            float: left;
        }
        .key-search .search-txt{
            width: 91px;
            height: 25px;
            color: red;
            padding: 2px 2px 2px 5px;
        }
		.key-search a.i{
            height: 31px;
            width: 30px;
            background-color: #f4f4f4;
            display: inline-block;
			<!--border-left: none;-->
			/*border-left: none;左边不设置边界线条*/
			<!--border: 1px yellow solid;-->
        }
        .key-search .ico{
            background: url("images/icon.png") no-repeat 0 -198px;
            height: 12px;
            width: 15px;
            display: inline-block;
            margin-bottom: 6px;
            margin-left:10px;
        }
        .action-nav{
            position: absolute;
            right: 130px;
        }
        .action-nav a{
            color: #fff;
            padding-left: 18px;
            padding-right: 18px;
            display: inline-block;
        }
        .action-nav a:hover{
            background-color: #c0cddf;
        }

		/* head end */

 		.main-content-box{
            background-color: gray;
            width: 100%;
            padding-top: 44px;
        }
		.main-content{
            margin: 0 auto;
            background-color: #fff;
            width: 960px;
            padding: 0px 0px 20px 20px;
            /*上右下左*/
            /*height: auto;!important*/
            /*!important表示后续不可再覆盖*/
            min-height:700px;
            /*设置最小高度*/
            overflow: hidden;
            /*当高度设置为height时hidden对超出的隐藏 scroll auto 为超出的内容进行滚动条的设置*/
            /*当高度为min-height时,参数均为自动加长height*/
        }
        .content-L{
            float: left;
            width: 630px;
        }

        .child-nav,.sort-nav{
            float: left;
            padding: 10px;
        }
        .publish-btn{
            float: right;
            padding: 10px;
        }
        .top-area{
		    overflow: hidden;
			/*防止横线跑到上面 或者在里面加一个标签清除浮动*/
            border-bottom: 1px solid red ;
        }
        .child-nav .active{
            background: url("images/tip.png") no-repeat 0 -299px;
            color: black;
        }
        .child-nav a{
            display: inline-block;
            width: 60px;
            height: 26px;
            line-height: 26px;
            /*竖直居中*/
            text-align: center;
            /*水平居中*/
            color: #369;
            font-weight: 700;
            margin-top: 3px;
        }
        .sort-nav {
            margin-left: 144px;
            margin-top: 10px;
        }
        .sort-nav .active{
            color: #b4b4b4;
        }
        .sort-nav a{
            margin-left: 10px;
            color: darkgreen;
        }
        .publish-btn{
            display: inline-block;
            width:50px;
            height: 18px;
            margin-top: 8px;
            background-color: #84a42b;
            color: #fff;
            line-height: 18px;
            text-align: center;
        }

        /*end toparea*/

        .content-list .item{
            border-bottom: 1px solid red ;
            margin-top: 10px;
        }

        .item .news-pic{
            float: right;
            margin-top: 3px;
            margin-left: 10px;
        }
        .part1{
            line-height: 20px;
        }
        .part1 .content-source,.part1 .content-kind{
            color:#d4d4d4 ;
        }
        .part1 .content-kind{
            text-decoration: underline;
            /*加下划线*/
        }
        .part1 .show-content{
            font-size: 13px;
            color: #369;
            font-weight: 700;
        }

        .part2{
            padding-top: 6px;
            color: #ccc;
            padding-bottom: 12px;
        }
        .hand-icon{
            background: url("images/icon_18_118.png") no-repeat 0 0;
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            /*垂直居中 top bottom middle -4px为距离底部4px*/
        }
        .icon-recommend{
            background-position: 0 -40px;
        }
        .icon-discuss{
            background-position: 0 -100px;
        }
        .icon-collect{
            background-position: 0 -140px;
        }
        .part2 .user-a span{
            vertical-align: -4px;
        }
        .part2 a{
            margin-left: 7px;
        }
        .part2 b,.time-into i{
            color: #d4d4d4;
            margin-left: 3px;
        }

        .share-icon a{
            background: url("images/share_icon.png");
            height: 14px;
            width: 17px;
            display: inline-block;
            vertical-align: -4px;
            opacity: 0.3;
            /*设置透明度*/
        }
        .share-site-to .share-icon a.icon-sina {
            background-position: 0 -90px;
        }
        .share-site-to .share-icon a.icon-douban {
            background-position: 0 -105px;
        }
        .share-site-to .share-icon a.icon-qqzone {
            background-position: 0 -120px;
            width: 16px;
            height: 14px;
        }
        .share-site-to .share-icon a.icon-tenxun {
            background-position: 0 -136px;
        }
        .share-site-to .share-icon a.icon-renren {
            background-position: 0 -151px;
        }
        .share-site-to{
            float: right;
        }
        .share-icon a:hover{
            opacity: 1;
        }

		/*end item*/

		.content-R{
			float:right;
            width:300px;
            min-height:1340px;
            background-color: rebeccapurple;
            background-image: url("1.jpg");
            background-repeat: repeat;
            background-size: 150px 150px;
            background-position: left center;
            overflow:hidden;
		}

		/*end r*/

		.page-area ul{
			margin-top: 2px;
			margin-left: 10px;
		}
        .page-area ul li {
            display: inline-block;
            float: left;
        }
        .ct_pagepw{
        	display: inline-block;
			color: #000;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 34px;
            margin-left: 3px;
        }
		.ct_pagepa{
			display: inline-block;
			color: #369;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 34px;
            border: 1px solid #e1e1e1;
            border-radius: 20%;
            /*设置圆角*/
            margin-left: 3px;
		}
		.ct_page_edge{
			display: inline-block;
			float: left;
            color: #369;
            height: 34px;
            line-height: 34px;
            text-align: center;
			width: 60px;
			border: 1px solid #e1e1e1;
			border-radius: 20%;
			margin-left: 3px;
		}
        .page-area ul li a.ct_pagepa:hover,.ct_page_edge:hover{
            color: #fff;
            background-color: #204982;
        }

		/*end page*/

        .footer-box{
            background-color: #fff;
        }
        .footer-box .foot-nav {
            padding-top: 15px;
            text-align: center;
            border-top: 1px solid #ccdcef;
        }
        .footer-box .foot-nav2{
            text-align: center;
        }
        .foot-nav2 a,.foot-nav2 span{
        	padding:5px;
        }
        .foot-nav2 a img{
        	vertical-align: -2px;
        }
	</style>
</head>

网页标签

<body>
<div class="head-box">
    <div class="head-content">
        <a href="#" class="logo"></a>
		<!--#为空，不跳转-->
        <div class="action-menu">
			<a href="#" class="tb active">全部</a>
			<a href="#" class="tb">42区</a>
			<a href="#" class="tb">段子</a>
			<a href="#" class="tb">图片</a>
			<a href="#" class="tb">挨踢1024</a>
			<a href="#" class="tb">你问我答</a>
        </div>

        <div class="key-search">
			<form action="/" method="post">
				<input type="text" class="search-txt" autocomplete="off">
				<a href="#" class="i" >
					<span class="ico"></span>
				</a>
			</form>
		</div>
        <div class="action-nav">
			<a href="#" class="register-btn">注册</a>
			<a href="#" class="login-btn">登录</a>
		</div>
    </div>
</div>

<div class="main-content-box">
    <div class="main-content">
        <div class="content-L">
            <div class="top-area">
				<div class="child-nav">
					<a href="#"  class="hotbtn active" >最热</a>
					<a href="#"  class="newbtn"    >最新</a>
					<a href="#"  class="personbtn" >人类发布</a>
				</div>
				<div class="sort-nav">
					<a href="#"  class="sortbtn active" >即时排序</a>
					<a href="#"  class="newbtn" >24小时</a>
					<a href="#"  class="newbtn" >3天</a>
				</div>
				<a href="#" class="publish-btn">
                    <span class="n2">发布</span>
				</a>
			</div>

            <div class="content-list">
                <div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
                <div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
				<div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
                <div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
				<div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
				<div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
                <div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
				<div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
                <div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
				<div class="item">
					<div class="news-pic">
						<img src="images/news.jpg" alt="抽屉新热榜">
					</div>
					<div class="news-content">
						<div class="part1">
							<a href="#" class="show-content" target="_blank">
							@大脸撑：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
							次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
							一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
							了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
							</a>
							<span class="content-source">-ww4.sinaimg.cn</span>
							<a href="#" class="n2">
								<span class="content-kind">42区</span>
							</a>
						</div>
						<div class="part2">
							<a href="#" class="recommend" title="推荐">
								<span class="hand-icon icon-recommend"></span>
								<b>4</b>
							</a>
							<a href="javascript:;" class="discuss">
								<span class="hand-icon icon-discuss"></span>
								<b>5</b>
							</a>
							<a href="javascript:;" class="collect" title="加入私藏">
								<span class="hand-icon icon-collect"></span>
								<b>私藏</b>
							</a>
							<a href="#" class="user-a">
								<span>
									<img src="images/13.png">
								</span>
								<b>乱太郎</b>
							</a>
							<span class="left time-into">
								<a class="time-a" href="#" target="_blank">
									<b>4分钟前</b>
								</a>
								<i>入热榜</i>
							</span>
							<!-- 分享各微博的按钮 -->
							<span class="share-site-to">
								<i>分享到</i>
								<span class="share-icon">
									<a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
									<a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
									<a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
									<a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
									<a class="icon-renren"  title="分享到人人网"   href="#" ></a>
								</span>
							</span>
						</div>
					</div>
                  </div>
			</div>

            <div class="page-area">
				 <ul>
					 <li><span class="ct_pagepw">1</span></li>
					 <li><a href="#" class="ct_pagepa">2</a></li>
					 <li><a href="#" class="ct_pagepa">3</a></li>
					 <li><a href="#" class="ct_pagepa">4</a></li>
					 <li><a href="#" class="ct_pagepa">5</a></li>
					 <li><a href="#" class="ct_pagepa">6</a></li>
					 <li><a href="#" class="ct_pagepa">7</a></li>
					 <li><a href="#" class="ct_pagepa">8</a></li>
					 <li><a href="#" class="ct_pagepa">9</a></li>
					 <li><a href="#" class="ct_pagepa">10</a></li>
					 <a href="#" class="ct_page_edge">下一页</a>
				 </ul>
			</div>
        </div>
        <div class="content-R">
        </div>
	</div>
    <div class="footer-box">
		<div class="foot-nav">
            <a href="#" target="_blank">关于我们</a>
			<span>|</span>
			<a href="#" target="_blank">联系我们</a>
			<span>|</span>
			<a href="#" target="_blank">服务条款</a>
			<span>|</span>
			<a href="#" target="_blank">隐私政策</a>
			<span>|</span>
			<a href="#" target="_blank">抽屉新热榜工具</a>
			<span>|</span>
			<a href="#" target="_blank">下载客户端</a>
			<span>|</span>
			<a href="#" target="_blank">意见与反馈</a>
			<span>|</span>
			<a href="#" target="_blank">友情链接</a>
			<span>|</span>
			<a href="#" target="_blank">公告</a>
        	<a href="#" target="_blank" style="margin-left:0;vertical-align:-3px;">
				<img src="images/ct_rss.gif" width="36" height="14">
			</a>
        </div>

        <div class="foot-nav2">
			<a target="_blank" href="#">
				<img class="foot_e" src="images/footer1.gif" width="36" height="14">
			</a>
			<span class="foot_d">旗下站点</span>
			<span class="foot_a">©2016chouti.com</span>
			<a target="_blank" href="#" class="foot_b">京ICP备09053974号-3</a>
			<a target="_blank" href="#" class="foot_b">京公网安备 110102004562</a>
			<div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div>
        </div>
	</div>
</div>
</body>
</html>
HiFerry
关注
专栏目录
高效的CSS选择器编写指南
12-13
《高效的CSS选择器编写指南》 CSS选择器的效率对于网页性能有着显著的影响，尤其是在处理大量DOM元素的大型网站上。CSS选择器的正确使用能够提高页面加载速度，提升用户体验。以下是一些关于CSS选择器效率和编写...
Div和CSS编写中对包含选择器和通配选择器的使用
12-13
包含选择器包含选择器也叫派生选择器，顾名思义，是一种具有包含关系的选择。多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边（即右边的选择器只能在左边的选择器范围内选择）。一个包含选择器的...
巧妙利用css选择器编写样式或者页面布局
进步的记录
07-20 362
1、::before或者::after ::before选择器在被选元素的内容前面插入内容 ::after选择器在被选元素的内容后面插入内容 以::before为例的两个小例子 //css部分 .result{ position: relative; padding-left:10px; } .result::before{ content:""; //必须得有centent，否则内容无法展示出来 position: absolute; top:0; left:0;
网页制作学习之CSS选择器
itsalittledifficult的博客
01-08 442
详细参考见http://www.runoob.com/cssref/css-selectors.html     菜鸟教程                   http://www.w3school.com.cn/cssref/css_selectors.asp     W3School 元素选择器  element{}    最基本的选择器，可以直接为标签添加css样式，主流浏览器的各个版...
css选择器制作一个网页,CSS选择器和做网页思路
weixin_42519733的博客
08-04 780
这节要做出以下效果的网页其实，做网页就像画画一样，要分为一个一个的区域制作当把基本的区域确定好后，我们才能开始制作网页拿我们今天要做的这种个网页为例，我们可以先把它分为三个区域分别为蓝绿黄区域，即页头、页中和页尾我们先来定义这三个区域banner为头部，navigation为页中，bottom为页脚(当然这个id的属性也可以自己设置，比如页头就可以定义为拼音yetou)这里解释一下div一个空的d...
HTML（css选择器）
mooonk的博客
03-25 121
HTML（css选择器） 我们常用的选择器有三种：标签名选择器（元素选择器）、id选择器、类选择器 一、选择器 1.标签名选择器 与之前使用的内嵌式css引入方法相同，span名称可以任意修改 语法为在head标签内添加：标签名{样式}，在body内部的想要引入样式的范围添加标签名包裹 head内部： span { color: black;background-color: brown;font-size: 5px;font-family: "微软雅黑 Light"; } body内部： &lt
css选择器
WSSQYHW的博客
08-24 117
今天学习了css选择器，之前用HTML来做一个网页的内容，今天学会了使用css样式来进行样式的添加 css能够快速的去改变网页的样式，如在页面中想修改所有的 div 的行距 在head 中 加 line-height:加指定像素就可以了。...
CSS.rar_css_css样式_css网页样式_html_网页模板
09-24
**标签** "css css样式 css网页样式 html 网页模板" 是对该主题的关键词概括，强调了这个资源与CSS样式、网页设计和HTML模板紧密相关。CSS样式和网页样式是同义词，指的是通过CSS控制的页面表现；HTML则负责网页的...
HTML5&CSS3网页制作：属性选择器.pptx
06-01
CSS3（层叠样式表）的选择器是其强大的工具之一，它允许开发者更精确地定位和控制网页元素的样式。其中，属性选择器是CSS3引入的一种高级选择器，极大地增强了对元素样式的控制能力。 属性选择器根据元素的属性及其...
用css来写html,用css 写html
weixin_26840895的博客
06-20 305
document.createElement_x()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。下面，举例说明document.createElement_x()的用法。例1：var board...
用css的文本样式写一个网页,css设置网页文本选中样式
weixin_39979516的博客
08-04 197
网页的默认的文本选中颜色是蓝底白字(大多应该是吧)，这个样子：感觉并不是特别好看，可以通过CSS3的一个特性，一个CSS3的伪类选择器::selection来设置文本被选中时的状态，比如本博客的主题(2016-10-7)：/*设置文本选中颜色，看起来更酷一些*/::selection {background:#DDDDDE;}::-moz-selection {background:#DDDDDE...
在HTML中使用css的方法以及选择器类型
Amber的博客
09-13 754
在HTML中使用css的方法 内嵌样式 这种css一般位于HTML文件的头部，即<head></head>标签内，并且以<style>开始，以</style>结束。内嵌样式允许在它们所应用的HTML文档的顶部设置样式，然后在整个HTML文件中直接调用该样式，这些定义的样式就应用到页面了 基本语法： <style type="text/css"> <!-- 选择符1 （样式属性：属性值；样式属性：属性值；……） 选择符2 （样式属性：属性值；样
html+css基础教程入门篇之css选择器详细解读
前端基础入门学习线路
02-16 3843
CSS 选择器分组 CSS选择器分组，可以把定义相同属性的不同标签做为一组处理，缩短了CSS样式编写的时间和CSS样式表的大小。 例如希望h2和p标签的字体颜色都设置为黑色，则可以写成： h2,p{color:black;} 通过分组，可以将相同属性的样式“压缩”在一起，这样就可以得到更简洁的样式表。例如： /* no grouping */ h1 {color:blue;} h2 ...
使用css用4种方式写出html文件,在网页中使用css的几种方式
weixin_34551614的博客
06-15 114
喵喔喔楼上说的对主要就这4种、建议使用第2种~便于修改 调用 和优化，(1)使用Embed(嵌入样式单)排版样式：即将CSS代码直接插入每个页面的HTML的区，就象上一节看到的。使用...标签。例如：(2)使用“link(外部样式单)排版样式”：即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某...
一.简单的HTML页面和CSS用法
benben574599386的博客
04-21 648
目录 1.介绍HTML文本结构和head、body的作用 2.非构造页面标签元素介绍 3. 构造页面必备之HTML标签元素介绍 3.1常见HTML标签元素介绍一 3.2 常见HTML标签元素介绍二 3.3 常见HTML标签元素介绍三 3.4 常见HTML标签元素介绍四 ...
css 学习（1） css多类选择器
LongMaySunshine的博客
06-05 197
为了不因摸鱼而被赶出公司的我 不得不抛弃了之前学习的后端知识捡起前端来学习 .smaple.nav-div{width:100%} 这是公司给我的css样式表第二行但是 给了我一个css样式表，"." 是类选择器我知道，类选择器后又接类选择器是什么？？。 http://www.w3school.com.cn/css/css_selector_class.asp 万能的百度没能解救我但是w3sc...
我用div+css技术来重新编写网站页面的体会
daiqimeng的专栏
11-26 369
转载请注明出处：北京网站建设 http://www.beijingjianzhan.com-西西弗斯工作室。随着W3C网页规范的影响和优势组件深入人心，拿到设计师设计好的网页PSD文件后，过去。通常我都是切图，然后使用Dreamweav等软件，表格创立好框架后导图，然后开始具体代码的编写，现在应该暂时遗忘这种方法，当拿到一个PSD文件后，先在白纸上画清楚这个网页的结构层次，并给每个模块赋予
HTML中CSS的各种选择器使用方法
jx_NChen的博客
08-27 518
选择器 元素选择器 用标签名来作为选择器，选中所有相应的元素 3.2类选择器 根据class的属性来选择元素，样式定义为： .className{ xxxxxxx} 3.3 ID选择器 根据id名来选择元素，样式定义为： #idName{xxxxxxxxx} 3.4属性选择器 关系选择器 E F：选择E元素的后代元素F（所有后代 包括子类，孙类） E>F：选择E元素的直接后代元素（也就是子类） E+F：选择E元素的第一个弟弟...
深入理解CSS属性选择器：拼接HTML的DNA
属性选择器是CSS中一个强大的工具，它允许我们根据HTML元素的属性来应用样式，而无需依赖特定的ID或类。通过理解和掌握属性选择器的用法，我们可以编写出更加灵活和简洁的CSS代码。 属性选择器的基本语法是将属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值