前端技术——4——CSS练习

前端面试笔试题目-CSS专项练习(进阶) 1、盒模型(content-box) 盒模型是CSS的核心概念,页面中的所有元素都被看作一个矩形盒子,这个盒子包含元素的内容、内边距、边框和外边距。 默认盒模型的width和height只会作用于盒子的内容区,而通过"box-sizing"属性可以改变计算盒子大小的方式。“box-sizing"的默认值为"content-box”,把值只作用于内容区。 默认情况下,width和height是指盒子的内容区域的大小,如果此时给盒子添加内边距或边框,那么会导致整个盒子变大。 现在给类名为"content-bo 阅读详情

仿抽屉新热榜界面:

写一个类似的页面,练习CSS的使用。

整个页面分为两大部分,一是蓝色的页头,然后是页体

头部,即蓝色一行的设置,是页面的头部:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }  /*清空默认设置,让元素没有外边距和填充*/
        a{
            text-decoration: none; /*将a标签的下划线样式全部去掉*/
        }
        body{
            font-size: 12px;
        }
        .head-box{
            background-color: #2459a2;
            height: 44px;
            width: 100%;
            position: fixed;  /*设置盒子为固定位置*/
            top: 0;
            left: 0;
        }
        .head-content{
            margin: 0 auto;
            width: 1016px;
            height: 44px;
            background-color: #2459a2;
            line-height: 44px; /*这一步为了使后面的a标签内容,即菜单能够垂直居中*/
            position: relative;  /*为了导航条——注册、登录的position定位,这个是参考点*/
        }
        .logo{
            background: url("images/logo.png") no-repeat 0 0;
            height: 23px;
            width: 121px;
            float: left;
            margin-top: 11px;
            /*display: inline-block;*/
        }  /*显示logo图标,这里使用背景的方式,不使用插入img标签*/
           /*a标签是内联标签,float后就类似inline-block标签,可设置宽高等属性*/
           /*a标签是一个空标签,空标签其背景是无法显示的,即无内容无法撑起,所以需要设置宽高*/
           /*如果a标签有内容,背景会随内容的长度显示部分或全部*/
           /*如果不使用float,又无内容,则无法显示背景的,这时可以使用display:inline-block*/
        .action-menu{
            float: left;
            margin-left: 20px ;/*让菜单与logo之间有一段距离*/
        }
        .action-menu a.tb{
            color: #c0cddf;
            margin-left: -8px;
            /*两个a标签之间有换行的,默认会多出一个空隙,设置margin-left为负数,就是为了消除这个空隙,使效果看起来是紧挨着*/
            padding: 0 13px 0 13px; /*使各个a标签分离开*/
            display: inline-block;
            /*不设置inline-block,高度撑不起来,只有内容的高度*/
        }
        .action-menu a.tb:hover{
            color: #ffffff;
            background-color: rosybrown;
        }
        .action-menu a.active,.action-menu a.active:hover{
            color: gold;
            background-color: blue;
        } /*单独设置全部这个菜单项,并且使菜单项的样式和鼠标放上去的样式一样*/

        .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;
            padding: 2px 2px 2px 5px;
            color: red;
        }
        .key-search .ico{
            background: url("images/icon.png") no-repeat 3px -195px;
            height: 13px;
            width: 13px;
            display: inline-block;
            margin-left: 4px;


        }
        .key-search a.i{
            height: 29px;
            width: 30px;
            background-color: #f4f4f4;
            display: inline-block;
            border: 1px yellow solid;
            border-left: none;
            margin-top: 1px;
            line-height: 29px;
        }
        .action-nav{
            position: absolute;
            right: 132px;
            /*这里设置position定位,其参考点是.head-content*/
        }
        .action-nav a{
            color: #fff;
            padding: 0 20px;
            display: inline-block;
        }
        .action-nav a:hover{
            background-color: #c0cddf;
        }
    </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>


</body>
</html>

结果页面如下:

 对页体中左边新闻栏进行设置:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }  /*清空默认设置,让元素没有外边距和填充*/
        a{
            text-decoration: none; /*将a标签的下划线样式全部去掉*/
        }
        body{
            font-size: 12px;

        }
        .head-box{
            background-color: #2459a2;
            height: 44px;
            width: 100%;
            position: fixed;  /*设置盒子为固定位置*/
            top: 0;
            left: 0;
        }
        .head-content{
            margin: 0 auto;
            width: 1016px;
            height: 44px;
            background-color: #2459a2;
            line-height: 44px; /*这一步为了使后面的a标签内容,即菜单能够垂直居中*/
            position: relative;  /*为了导航条——注册、登录的position定位,这个是参考点*/
        }
        .logo{
            background: url("images/logo.png") no-repeat 0 0;
            height: 23px;
            width: 121px;
            float: left;
            margin-top: 11px;
            /*display: inline-block;*/
        }  /*显示logo图标,这里使用背景的方式,不使用插入img标签*/
           /*a标签是内联标签,float后就类似inline-block标签,可设置宽高等属性*/
           /*a标签是一个空标签,空标签其背景是无法显示的,即无内容无法撑起,所以需要设置宽高*/
           /*如果a标签有内容,背景会随内容的长度显示部分或全部*/
           /*如果不使用float,又无内容,则无法显示背景的,这时可以使用display:inline-block*/
        .action-menu{
            float: left;
            margin-left: 20px ;/*让菜单与logo之间有一段距离*/
        }
        .action-menu a.tb{
            color: #c0cddf;
            margin-left: -8px;
            /*两个a标签之间有换行的,默认会多出一个空隙,设置margin-left为负数,就是为了消除这个空隙,使效果看起来是紧挨着*/
            padding: 0 13px 0 13px; /*使各个a标签分离开*/
            display: inline-block;
            /*不设置inline-block,高度撑不起来,只有内容的高度*/
        }
        .action-menu a.tb:hover{
            color: #ffffff;
            background-color: rosybrown;
        }
        .action-menu a.active,.action-menu a.active:hover{
            color: gold;
            background-color: blue;
        } /*单独设置全部这个菜单项,并且使菜单项的样式和鼠标放上去的样式一样*/

        .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;
            padding: 2px 2px 2px 5px;
            color: red;
        }
        .key-search .ico{
            background: url("images/icon.png") no-repeat 3px -195px;
            height: 13px;
            width: 13px;
            display: inline-block;
            margin-left: 4px;


        }
        .key-search a.i{
            height: 29px;
            width: 30px;
            background-color: #f4f4f4;
            display: inline-block;
            border: 1px yellow solid;
            border-left: none;
            margin-top: 1px;
            line-height: 29px;
        }
        .action-nav{
            position: absolute;
            right: 132px;
            /*这里设置position定位,其参考点是.head-content*/
        }
        .action-nav a{
            color: #fff;
            padding: 0 20px;
            display: inline-block;
        }
        .action-nav a:hover{
            background-color: #c0cddf;
        }

        /*-----------以上是头部的CSS------------*/

        .main-content-box{
            background-color: #ededed;
            width: 100%;
            padding-top: 44px;
            /*因为头部的大盒子.head-box设置为position:fixed,脱离了文档流,这个盒子会顶上去,会有44px高度被遮盖*/
        }
        /*上面的大盒子中又分为两部分,main-content和footer-box*/
        .main-content{
            margin: 0 auto;
            background-color: #fff;
            width: 960px;
            height: auto; /*高度为自适应,根据内容自动填充扩展*/
            min-height: 700px; /*设置最初高度,内容小于这个值,就显示这个值大小*/
            padding: 6px 28px 60px 28px;
        }
        /*上面的大盒子又分为左右两个小盒子,左边是内容区,右边是对话区*/
        .content-L{
            float: left;
            width: 630px;

        }
        .top-area{
            border-bottom: 1px solid #c0cddf ;
            overflow: hidden;
            /*这个盒子中有三个小盒子.child-nav,.sort-nav.publish-btn,都float后,这个盒子中就没有内容了,无法撑起*/
            /*显示的盒子的底边框就会跑到上面去,设置overflow,就撑起来,灰色线显示在正确位置*/

        }

        .child-nav,.sort-nav{
            float: left;
            padding-bottom: 10px;

        }
        .publish-btn{
            float: right;
            padding-bottom: 10px;
        }
        .child-nav a{
			display: inline-block;
            width: 60px;
            height: 26px;
			line-height: 26px;
			text-align: center;
			color: #369;
			font-weight: 700;
			margin-top: 5px;

		}
        .child-nav .active{
            background: url("images/tip.png") no-repeat 0 -299px;
 			color: black;
        }
		.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;
            background-color: #84a42b;
            width: 134px;
            height: 26px;
            color:#ffffff;
            line-height: 32px;
            text-align: center;

        }
        /*-----------------上边是top_area-----------*/
        .content-list .item{
            border-bottom: 1px solid #c0cddf;
            margin-top: 10px;
        }
        .item .news-pic{
            float: right;
            margin-top: 3px;
            margin-left: 12px;
        }
        .part2{
            padding-top: 6px;
            color: #b4b4b4;
            margin-bottom: 10px;

        }
        .hand-icon{
            background: url("images/icon_18_118.png") no-repeat 0 0;
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            /*垂直居中,对图片来说的,让小图标与文本按要求的位置显示,原来没对齐*/
        }
        .icon-recommend{
            background-position: 0 -160px;
        }
        .icon-discuss{
            background-position: 0 -100px;
        }
        .icon-collect{
            background-position: 0 -140px;
        }
        .user-a span{
            vertical-align: -4px;
        }
        .part2 a{
            margin-left: 10px;
        }
        .part1{
            line-height: 20px;
        }
        .part1 .content-source,.content-kind{
            color:#b4b4b4;
        }
        .part1 .content-kind{
            text-decoration: underline;
        }
        .part1 .show-content{
            color: #369;
            font-size: 14px;
            font-weight: 700;
        }
        .part2 b,.time-into i{
            color: #b4b4b4;
        }
        .share-icon a{
            background: url("images/share_icon.png") no-repeat 0 0;
            height: 14px;
            width: 17px;
            display: inline-block;
            vertical-align: -4px;
            opacity: 0.2; /*让小图标一开始显示比较模糊*/
        }
        .share-icon a:hover{
            opacity: 1; /*鼠标悬停在小图标,则显示明亮*/
        }
        .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;
        }
        .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;
        }
    </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>



        </div>

        <div class="content-R">
        </div>

    </div>

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

最后的结果:

 对item项进行复制,就可以实现新闻的多条显示,格式都如同第一条样式。

然后设置分页及footer的设置:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }  /*清空默认设置,让元素没有外边距和填充*/
        a{
            text-decoration: none; /*将a标签的下划线样式全部去掉*/
        }
        body{
            font-size: 12px;

        }
        .head-box{
            background-color: #2459a2;
            height: 44px;
            width: 100%;
            position: fixed;  /*设置盒子为固定位置*/
            top: 0;
            left: 0;
        }
        .head-content{
            margin: 0 auto;
            width: 1016px;
            height: 44px;
            background-color: #2459a2;
            line-height: 44px; /*这一步为了使后面的a标签内容,即菜单能够垂直居中*/
            position: relative;  /*为了导航条——注册、登录的position定位,这个是参考点*/
        }
        .logo{
            background: url("images/logo.png") no-repeat 0 0;
            height: 23px;
            width: 121px;
            float: left;
            margin-top: 11px;
            /*display: inline-block;*/
        }  /*显示logo图标,这里使用背景的方式,不使用插入img标签*/
           /*a标签是内联标签,float后就类似inline-block标签,可设置宽高等属性*/
           /*a标签是一个空标签,空标签其背景是无法显示的,即无内容无法撑起,所以需要设置宽高*/
           /*如果a标签有内容,背景会随内容的长度显示部分或全部*/
           /*如果不使用float,又无内容,则无法显示背景的,这时可以使用display:inline-block*/
        .action-menu{
            float: left;
            margin-left: 20px ;/*让菜单与logo之间有一段距离*/
        }
        .action-menu a.tb{
            color: #c0cddf;
            margin-left: -8px;
            /*两个a标签之间有换行的,默认会多出一个空隙,设置margin-left为负数,就是为了消除这个空隙,使效果看起来是紧挨着*/
            padding: 0 13px 0 13px; /*使各个a标签分离开*/
            display: inline-block;
            /*不设置inline-block,高度撑不起来,只有内容的高度*/
        }
        .action-menu a.tb:hover{
            color: #ffffff;
            background-color: rosybrown;
        }
        .action-menu a.active,.action-menu a.active:hover{
            color: gold;
            background-color: blue;
        } /*单独设置全部这个菜单项,并且使菜单项的样式和鼠标放上去的样式一样*/

        .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;
            padding: 2px 2px 2px 5px;
            color: red;
        }
        .key-search .ico{
            background: url("images/icon.png") no-repeat 3px -195px;
            height: 13px;
            width: 13px;
            display: inline-block;
            margin-left: 4px;


        }
        .key-search a.i{
            height: 29px;
            width: 30px;
            background-color: #f4f4f4;
            display: inline-block;
            border: 1px yellow solid;
            border-left: none;
            margin-top: 1px;
            line-height: 29px;
        }
        .action-nav{
            position: absolute;
            right: 132px;
            /*这里设置position定位,其参考点是.head-content*/
        }
        .action-nav a{
            color: #fff;
            padding: 0 20px;
            display: inline-block;
        }
        .action-nav a:hover{
            background-color: #c0cddf;
        }

        /*-----------以上是头部的CSS------------*/

        .main-content-box{
            background-color: #ededed;
            width: 100%;
            padding-top: 44px;
            /*因为头部的大盒子.head-box设置为position:fixed,脱离了文档流,这个盒子会顶上去,会有44px高度被遮盖*/
        }
        /*上面的大盒子中又分为两部分,main-content和footer-box*/
        .main-content{
            margin: 0 auto;
            background-color: #fff;
			overflow: hidden;
			/*超出部分默认是溢出,hidden是隐藏,不显示,还有一个auto,自动加滚动条,还可以是scroll,也是加滚动条*/
            width: 960px;
            height: auto; /*高度为自适应,根据内容自动填充扩展*/
            min-height: 700px; /*设置最初高度,内容小于这个值,就显示这个值大小*/
            padding: 6px 28px 60px 28px;
        }
        /*上面的大盒子又分为左右两个小盒子,左边是内容区,右边是对话区*/
        .content-L{
            float: left;
            width: 630px;

        }
		.content-R{
			float: right;
			width: 329px;
			background-color: #84a42b;
			border-left: 1px solid #b4b4b4;
		}
        .top-area{
            border-bottom: 1px solid #c0cddf ;
            overflow: hidden;
            /*这个盒子中有三个小盒子.child-nav,.sort-nav.publish-btn,都float后,这个盒子中就没有内容了,无法撑起*/
            /*显示的盒子的底边框就会跑到上面去,设置overflow,就撑起来,灰色线显示在正确位置*/

        }

        .child-nav,.sort-nav{
            float: left;
            padding-bottom: 10px;

        }
        .publish-btn{
            float: right;
            padding-bottom: 10px;
        }
        .child-nav a{
			display: inline-block;
            width: 60px;
            height: 26px;
			line-height: 26px;
			text-align: center;
			color: #369;
			font-weight: 700;
			margin-top: 5px;

		}
        .child-nav .active{
            background: url("images/tip.png") no-repeat 0 -299px;
 			color: black;
        }
		.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;
            background-color: #84a42b;
            width: 134px;
            height: 26px;
            color:#ffffff;
            line-height: 32px;
            text-align: center;

        }
        /*-----------------上边是top_area-----------*/
        .content-list .item{
            border-bottom: 1px solid #c0cddf;
            margin-top: 10px;
        }
        .item .news-pic{
            float: right;
            margin-top: 3px;
            margin-left: 12px;
        }
        .part2{
            padding-top: 6px;
            color: #b4b4b4;
            margin-bottom: 10px;

        }
        .hand-icon{
            background: url("images/icon_18_118.png") no-repeat 0 0;
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            /*垂直居中,对图片来说的,让小图标与文本按要求的位置显示,原来没对齐*/
        }
        .icon-recommend{
            background-position: 0 -160px;
        }
        .icon-discuss{
            background-position: 0 -100px;
        }
        .icon-collect{
            background-position: 0 -140px;
        }
        .user-a span{
            vertical-align: -4px;
        }
        .part2 a{
            margin-left: 10px;
        }
        .part1{
            line-height: 20px;
        }
        .part1 .content-source,.content-kind{
            color:#b4b4b4;
        }
        .part1 .content-kind{
            text-decoration: underline;
        }
        .part1 .show-content{
            color: #369;
            font-size: 14px;
            font-weight: 700;
        }
        .part2 b,.time-into i{
            color: #b4b4b4;
        }
        .share-icon a{
            background: url("images/share_icon.png") no-repeat 0 0;
            height: 14px;
            width: 17px;
            display: inline-block;
            vertical-align: -4px;
            opacity: 0.2; /*让小图标一开始显示比较模糊*/
        }
        .share-icon a:hover{
            opacity: 1; /*鼠标悬停在小图标,则显示明亮*/
        }
        .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;
        }
        .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;
        }
    /* --------------上边是新闻内容区的CSS设置 --------------  */
        .page-area ul li{
            display: inline-block; /*使li在一行*/
            float: left;
            /*color: red;*/
            height: 34px;
            line-height: 34px; /*文本居中*/
            text-align: center;
            width: 34px;
            border: 1px solid #e1e1e1;
            margin-top: 3px;
            border-radius: 20%;/*圆角设置*/
            margin-left: 3px; /*各个页号之间有个空隙*/
        }
		ul li a{
			color: red;
		}
        .page-area ul {
            margin-left: 10px; /*分页栏整体向右一点*/
        }

        .page-area ul  li.next{
            width: 50px;
			/*下一页三个字在li宽度为34px是不足以一行显示,这里需要单独设置,覆盖上面的设置*/
        }
		.page-area ul li:hover{
			color: white;
			/*这里的字体颜色设置没有起作用,这里设置的是li的字体,对li包裹的a标签的字体颜色不起作用*/
			background-color: #336699;
		}
		/*-----------以上是分页显示的设置----------*/
		.footer-box{
			background-color: #fff;
			clear: both ;/*清除两端的浮动,使自己独占一行,不被覆盖*/
			border-top:1px solid #b4b4b4;
			position: relative; /*设置position定位,在原来的位置上向下10px*/
			top:10px
		}
		.footer-box .foot-nav{
			padding-top: 15px;
			text-align: center;
		}
		.footer-box .foot-nav2{
			text-align: center;
		}
		.foot-nav2 .foot_b{
			color: gray;
		}
    </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>


            <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>
                             <li class="next"><a href="#" class="ct_page_edge">下一页</a></li>
                         </ul>
			</div>

        </div>

        <div class="content-R">
        </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:-2px;">
			<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 京公网安备 110102004562</a>
        <div style="margin-top:6px;">版权所有:北京格致璞科技有限公司</div>
        </div>
	</div>
    </div>

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

最终结果:

 对于页码的设置,有一点问题,对li标签设置inline-block,其内的a标签在做hover时,字体颜色不会变,就是hover只作用到li层,做一个修改:

.page-area ul li{
			display: inline-block;
			float: left;
		}
		.page-area ul li span{
			display: inline-block;
			color: #b4b4b4;
			height: 34px;
			line-height: 34px;
			text-align: center;
			width: 34px;
			/*border: 1px solid #e1e1e1;*/
			border-radius: 20%;
			margin: 10px;
		}
		.page-area ul li a{
			display: inline-block;
			color: #84a42b;
			height: 34px;
			line-height: 34px;
			text-align: center;
			width: 34px;
			border: 1px solid #e1e1e1;
			border-radius: 20%;
			margin: 3px;
			margin-top: 10px;
		}
		ul li a.ct_page_edge{
			width: 50px;
		}
		.page-area ul li a:hover{
			color: #fff;
			background-color: #336699;
		}

CSS简单练习案例 CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏(简易) 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END(素材源于pink老师分享) 1. 新闻 1.1 css代码: body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; .. 阅读详情

相关推荐

web前端篇:css练习题

1.div和span标签在网页中的作用? div将网站分割成独立的逻辑区域division分割 span:小区域标签,在不影响文本正常显示的情况下,单独设置对应的样式。 <style> span.active{ font-weight:bold; } </style> <p> <span>内容</span>...

ITmiaomiao666的博客 4412

css常用demo练习

1.横向弹性布局,溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同,”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性) display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局,水平均匀间

SundayGoG的博客 2559

前端小练习~收藏版(经典练习)

前端小练习是提升HTML、CSS和JavaScript技能的好方法。

卡拉米 912

CSS练习

实现效果图 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

毕业才是起点 1321

前端 | ( 九)尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新

尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新

知识库搭建ing 2867

Autosar结合simulink的汽车应用层软件开发实例

本文基于汽车应用开发案例,并结合Autosar相关知识,生成具有Autosar标准的汽车应用层开发代码,以供学习和参考。以上就是本篇内容,主要是利用Simulink创建Autosar接口并进行端口映射的方法。

m0_64899535的博客 2142

web前端开发学习方法

新手推荐的web基础学习方法

qq_70159084的博客 160

Python量化交易实战:pytdx库高效获取通达信分笔成交数据

本文详细介绍了如何使用Python的pytdx库高效获取通达信分笔成交数据,为量化交易提供关键市场微观结构分析。通过环境搭建、服务器连接、数据获取与清洗的完整流程,帮助开发者快速掌握这一免费高质量数据源,并实现分笔数据的实战分析与应用。

weixin_29061509的博客 1331

学习记录CSS练习语法属性

ClerloveUZI的博客 1864

让Claude连续写代码24小时会发生什么?揭秘长时运行”架构背后的工程逻辑与未来

AI长时运行实验揭示软件开发新范式 Claude Opus通过Harness框架24小时独立开发全栈应用的成功实验,展示了AI从辅助工具向异步协作者的进化。实验采用"上下文轮转"机制解决记忆管理难题,将任务拆解为微周期并通过文件系统同步进度。核心突破在于:1)TDD成为AI自治基石,200+测试用例确保开发不偏航;2)文件取代对话成为AI间高效沟通介质;3)开发者角色重构为需求定义和框架设计者。该实验证明,通过严谨的架构约束和验收标准,AI可完成复杂长周期任务,预示着软件开发将从手工作坊

老孙 | Ethan Sun 的博客:AI 智能体与 AI 原生软件的工程实践 1082

POWER(十一)charge pump原理

电荷泵是一种基于电容充放电原理的DC-DC转换电路,通过开关控制实现电压转换,包括升压、降压和负压输出。其核心是利用电荷守恒原理,通过电容存储和转移电荷来改变输出电压。典型拓扑结构包括倍压电路和多阶升压电路,具有结构简单、体积小等优势。关键参数包括转换效率、输出电流能力和开关频率,适用于芯片供电、显示屏驱动等低功耗场景。LVDS部分补充说明了自举电路在驱动电路中的应用及其自同步特性。

zhlwsh的博客 2759

HTML-CSS练习例子

HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看,入门是很慢的,所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的,可以打开了解一下,可以每天打卡,例子简单,循序渐进,设计的也比较好看。 下面是练习,当然布局的方法有很多,下面是一种。 01基础 这是第一个练习,但是很多大佬做出了,很多不一样的效果 比如: 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&

pacong的博客 3286

MoCap 动作捕捉开源库教程

数据通过 tf2 和支持不同 QoS 设置的 /poses 主题直接发布。该软件包最初是为 Crazyswarm 开发的,用于跟踪多达 50 个飞行机器人。

机器人控制与仿真应用 1303

【前端】前端及其技术栈

文章目录0)前端1、什么是前端?2、为什么需要前端?前端的发展简史:3、前端开发的类型Web前端开发:客户端(APP)开发:4、前端与后端的交互Ajax:Socket:*前端技术栈1)核心语言1.1 HTML什么是HTML?HTML如何描述网页?HTML文档与网页的关系?1.2 CSS什么是CSS?为什么使用CSS?1.3 JavaScript(JS)什么是JavaScript?JavaScript的作用?2)基础技术2.1 AJAX什么是AJAX?AJAX的工作原理?2.2 JSON什么是JSON?为什么

黑黑白白君的博客 2万+

【红外技术】DDE算法:HE在红外图像可视化上的应用(附源码)

并且数据一般是以 8 的整数倍的位宽在电子系统中应用,因此大多数的显示器的显示位宽为 8bit,共 256 个灰阶。为了使红外图像可视化,因此需要一种“数据压缩”技术,还需要既可能的不丢失原始图像信息。HE后的图像直方图分布比较均匀离散,图像对比度好。但是HE算法只是适用某些图像,它是将灰度集中区域进行拉伸得到,也会放大该集中区域的噪声,它是一种“不公平”的映射。以下是红外细节增强算法的演示,很明显右边的图像,展现了更多的图像细节,对于小目标的观测非常友好。文章已于2019-12-02修改。

sunwindl91181的博客 905

STM32F103(二十三)通用同步异步收发器(USART)

学习板:STM32F103ZET6 往期博客: STM32F103五分钟入门系列(一)跑马灯(库函数+寄存器)+加编程模板+GPIO总结 STM32F103五分钟入门系列(二)GPIO的七大寄存器+GPIOx_LCKR作用和配置 STM32F103五分钟入门系列(三)GPIO的常用库函数使用方法总结+一个网络上的误区 STM32F103五分钟入门系列(四)蜂鸣器实验(库函数+寄存器) STM32F103五分钟入门系列(五)按键实验(库函数+寄存器) STM32F103五分钟入门系列(六)时钟框图+相关寄存器

Curnane0_0的博客 1011

前端练习-CSS布局

前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis

qq_42385482的博客 2419

基于ZYNQ PL的AD7606数据采集与FFT实时频谱分析:从硬件到创新实现

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kKnmpgJm-1750295287594)(https://example.com/fft_plot.png)]本文涉及代码已在Xilinx ZCU102开发板与AD7606评估板上验证通过,采样率支持200KSPS@8通道,FFT计算延迟<1ms。传统MCU+DSP方案难以兼顾速度与功耗,而ZYNQ的PL+PS架构为这一问题提供了完美解决方案。本文实现的ZYNQ PL方案突破了传统处理器的性能瓶颈,通过。

QQ_778132974的博客 331

前端技术—CSS常用代码大全

各位读者好,今天广州蓝景小编带你探讨前端技术(HTML+CSS)入门之CSS常见代码大全,希望通过阅读本篇文章后大家有所收获,对前端知识有更深入的了解。HTML+CSS 可以很方便的进行网页的排版布局,还能减少很多不必要的代码。...

qq 2903359018博客 7176

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

WEB前端-CSS精灵技术

网页加载每一张图片都需要对服务器进行一次请求,所以对服务器的负荷会很大,可以将多个小图放到一张大图上,每个地方使用小图片都对大图进行背景定位即可,这样只需要加载一张大图片,对服务器只做一次请求,可以减少服务器的开销,提供网站的性能。概念:3个盒子浮动,左边和右边写宽高,负责加载两边的背景,中间的盒子宽度不定,让文字撑开。引入字体图标css和当前文件的css。banner部分css。按住空格键使用鼠标抓取。按住alt键滚动鼠标。

syh_SYH0321的博客 1366

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

web前端技术练习题

web技术练习题

在深度学习的路上不断探索 4417

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

前端技术栈之html,css,js

本文是对于前端技术的简短介绍,主要是关于css和html一些基础知识,以及javascript和ajax的简单介绍

lydon1314的博客 5572

CSS 练习项目教程

`css-exercises` 是由 The Odin Project 提供的 CSS 练习项目。该项目旨在通过一系列 CSS 相关的任务,帮助学习者巩固和提升在 HTML 和 CSS 方面的知识。这些练习是 The Odin Project 课程的一部分,建议在学习过程中按照课程进度完成。 ## 2. 项目快速启动 ### 2.1 克隆项目 首先,你需要将项目克隆到本地环境。你可以使用以下...

gitblog_00371的博客 919

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

Zeus 589

前端技术-编写常用的CSS样式

* 设置这个区域的内边距0px上下左右内边距都为5像素、5px 10px上下为5像素,左右为10像素、5px 6px 7px 8px 上5像素,左6像素,下7像素,右8像素 *//* 设置这个区域的内边距0px上下左右内边距都为5像素、5px 10px上下为5像素,左右为10像素、5px 6px 7px 8px 上5像素,左6像素,下7像素,右8像素 */5px 10px上下为5像素,左右为10像素、5px 6px 7px 8px 上5像素,左6像素,下7像素,右8像素 */

彪哥.TOP的博客 951

CSS参考手册v4.2.4中文版:助力前端开发者掌握网页样式设计

CSS参考手册v4.2.4中文版:助力前端开发者掌握网页样式设计 【下载地址】CSS参考手册v4.2.4中文版 《CSS参考手册 v4.2.4(中文版)》是前端开发者必备的实用工具,全面涵盖CSS1到CSS3的最新属性和选择器。手册内容详实,提供丰富的实例代码,帮助开发者快速理解并应用CSS技术。中文界面设计,极大方便国...

gitblog_06721的博客 858
上一篇: 前端技术——3——浮动与定位
下一篇: 前端技术——5——JavaScript
kaoa000
博客等级 码龄16年 6164粉丝 538原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kaoa000

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值