CSS简单练习案例

编程入门行业动态更新时间:2024-10-08 01:31:11

CSS简单练习<a href=https://www.elefans.com/category/jswz/34/1770649.html style= 案例"/>

CSS简单练习案例

1. 新闻

2. 小米侧边栏（简易）

3. 五彩导航栏

4. 产品模块

5. 新浪导航栏

6. 排行榜

7. 模块

#END（素材源于pink老师分享）

1. 新闻

1.1 css代码：

body {font: 16px/28px 'Microsoft YaHei';}h1 {font-weight: 400;text-align: center;}.two {font-size: 12px;color: rgba(136, 136, 151);text-align: center;}.two a {text-decoration: none;color: rgb(85, 26, 139);}.two .text {color: rgb(102, 102, 102);width: 170px;}.two .button {font-weight: 700;}p {text-indent: 2em;}/* 想要图片居中对齐,则是让它的父级 p标签添加 水平居中的代码 */.pic {text-align: center;}.end {font-size: 12px;color: rgb(136,136,136);}

1.2 HTML代码：

<body><h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1><p class="two">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a><input type="text" value="请输入查询条件..." class="text"> <input type="button" value="搜索" class="button"></p><hr><p>中国天气网讯今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p><h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4><p class="pic"><img src="pic.jpeg" alt="" ></p><p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p><p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h4>明日热度再升级！京津冀携手冲击38℃+</h4><p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p><p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p><p class="end">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

1.3 页面情况：

2. 小米侧边栏（简易）

2.1 css代码：

        div {width: 230px;height: 280px;background-color: #55585a;}div a {display: block;width: 200px;height: 40px;line-height: 40px;text-decoration: none;font-size: 14px;color: #fff;padding-left: 30px;}div a:hover {background-color: #ff6700;}

2.2 HTML代码：

<div><a href="#">手机 电话卡 </a><a href="#">电视 盒子 </a><a href="#">笔记本 平板 </a><a href="#">出行 穿戴 </a><a href="#">智能 路由器 </a><a href="#">健康 儿童 </a><a href="#">耳机 音响 </a>
</div>

2.3 页面情况：

3. 五彩导航栏

3.1 css代码：

        a {display: inline-block;height: 58px;width: 120px;text-decoration: none;font-family: '宋体';text-align: center;color: #fff;line-height: 48px;}.j1 {background-image: url(bg1.png);}.j1:hover {background-image: url(bg5.png);}.j2 {background-image: url(bg2.png);}.j2:hover {background-image: url(bg4.png);}.j3 {background-image: url(bg3.png);}.j3:hover {background-image: url(bg1.png);}.j4 {background-image: url(bg4.png);}.j4:hover {background-image: url(bg2.png);}.j5 {background-image: url(bg5.png);}.j5:hover {background-image: url(bg3.png);}

3.1 HTML代码：

<body><a href="#" class="j1">五彩导航</a><a href="#" class="j2">五彩导航</a><a href="#" class="j3">五彩导航</a><a href="#" class="j4">五彩导航</a><a href="#" class="j5">五彩导航</a>
</body>

3.3 页面情况：

4. 产品模块

4.1 css代码：

        * {margin: 0;padding: 0;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {width: 100%;}.box .word {width: 242px;height: 70px;font-size: 14px;padding: 0 28px;margin-top: 30px;}.box .user {margin-top: 20px;font-size: 12px;color: #b0b0b0;padding: 0 28px;}.box a {display: inline-block;text-decoration: none;font-size: 14px;color: #000;padding: 0 15px 0 28px;margin-top: 15px;}em {color: #ebe4e0;font-style: normal;margin: 0 6px 0 0;font-size: 14px;}span {color: #ff6700;font-size: 14px;}

4.2 HTML代码：

<body><div class="box"><img src="file:///D:/Web/HTML/html_css_material/%E7%AC%AC%E4%BA%94%E5%A4%A9/images/img.jpg" alt=""><div class="word">快递牛，整体不错蓝牙可以说秒连。红米给力</div><p class="user">来自于 117384232 的评价</p><a href="#">Redmi AirDots真无线蓝... </a><em>|</em><span> 99.9元</span></div>
</body>

4.3 页面情况：

5. 新浪导航栏

5.1 css代码：

        .box {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;font-size: 12px;line-height: 41px;}.box a {display: inline-block;height: 41px;text-decoration: none;color: #4c4c4c;padding: 0 20px;}.box a:hover {background-color: #eee;color: #ff8500;}

5.2 HTML代码：

<body><div class="box"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body>

5.3 页面情况：

鼠标移动到其中之一导航后：

6. 排行榜

6.1 css代码：

        table {width: 500px;height: 249px;}th {height: 35px;}table,th,td {border: 1px solid pink;text-align: center;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;}

6.2 HTML代码：

<body><table align="center" cellspacing="0"><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="up.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></table>
</body>

6.3 页面情况：

7. 模块

7.1 css代码：

        * {margin: 0;padding: 0;}.box {height: 163px;width: 248px;margin: 100px auto;border: 1px solid #ccc;}li {list-style: none;}.box h4 {height: 32px;line-height: 32px;padding-left: 15px;border-bottom: 1px dotted #ccc;font-weight: 400;font-size: 14px;}.list {margin-top: 7px;}.list li {height: 23px;line-height: 23px;padding-left: 20px;}.list li a {text-decoration: none;font-size: 12px;color: #666;}.list li a:hover {text-decoration: underline;}

7.2 HTML代码：

<body><div class="box"><h4>品优购快报</h4><ul class="list"><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div>
</body>

7.3 页面情况：