CSS几个练习

最新推荐文章于 2024-09-16 07:30:32 发布
最新推荐文章于 2024-09-16 07:30:32 发布
阅读量431 收藏 1
点赞数
分类专栏： HTML+CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124098524
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <style>
        body{
            background-color: rosybrown;
        }
        ul{
            width: 200px;
            height: 500px;
            /* 裁剪 */
            overflow: hidden;
            margin: 50px auto;
        }
        /* .img-list li{
             margin-bottom: 10px;
        } */
         .img-list li:not(:last-child){
             margin-bottom: 10px;
        }
        .img-list img{
            width: 196px;
            /* 高度自适应 */
            border: black 2px solid;
           
        }
    </style>


</head>
<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="../IMG/1.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="../IMG/2.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="../IMG/3.png" alt=""></a></li>
    </ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background-color: rgb(153, 182, 236);
        }
        .left-nav{
            width: 200px;
            height: 450px;
            padding:10px 0;
            background-color: white;
            margin:50px auto;
        }
        .left-nav .item{
             /* 要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为和父元素的height一样的值 */
            height: 25px;
            line-height: 25px;

            padding-left: 18px;
        }
        .left-nav .item:hover{
    
            background-color: rgb(209, 209, 209);
        }
        .item a{
            color:#333;
            text-decoration: none;
            font-size: 14px;
        }
        .item a:hover{
            color: red;
        }
        span{
            font-size: 10px;
            color: rgb(92, 92, 92);
            padding: 3px;
        }

    </style>
</head>
<body>
    <nav class="left-nav">
         <div class="item"><a href="#">家用电器</a></div>
         <div class="item">
             <a href="#">手机</a><span>/</span>
             <a href="#">运营商</a><span>/</span>
             <a href="#">数码</a>
         </div>
         <div class="item">
             <a href="#">电脑</a><span>/</span>
             <a href="#">办公</a>
         </div>
         <div class="item">
             <a href="#">男鞋</a><span>/</span>
             <a href="#">女鞋</a>
         </div>
         <div class="item">
             <a href="#">家具</a><span>/</span>
             <a href="#">家居</a><span>/</span>
             <a href="#">家装</a><span>/</span>
             <a href="#">厨具</a>
         </div>
         <div class="item"><a href="#">家用电器</a></div>
         <div class="item">
             <a href="#">手机</a><span>/</span>
             <a href="#">运营商</a><span>/</span>
             <a href="#">数码</a>
         </div>
         <div class="item">
             <a href="#">电脑</a><span>/</span>
             <a href="#">办公</a>
         </div>
         <div class="item">
             <a href="#">男鞋</a><span>/</span>
             <a href="#">女鞋</a>
         </div>
         <div class="item">
             <a href="#">家具</a><span>/</span>
             <a href="#">家居</a><span>/</span>
             <a href="#">家装</a><span>/</span>
             <a href="#">厨具</a>
         </div>
                  <div class="item"><a href="#">家用电器</a></div>
         <div class="item">
             <a href="#">手机</a><span>/</span>
             <a href="#">运营商</a><span>/</span>
             <a href="#">数码</a>
         </div>
         <div class="item">
             <a href="#">电脑</a><span>/</span>
             <a href="#">办公</a>
         </div>
         <div class="item">
             <a href="#">男鞋</a><span>/</span>
             <a href="#">女鞋</a>
         </div>
         <div class="item">
             <a href="#">家具</a><span>/</span>
             <a href="#">家居</a><span>/</span>
             <a href="#">家装</a><span>/</span>
             <a href="#">厨具</a>
         </div>
         <div class="item"><a href="#">家用电器</a></div>
         <div class="item">
             <a href="#">手机</a><span>/</span>
             <a href="#">运营商</a><span>/</span>
             <a href="#">数码</a>
         </div>
         <div class="item">
             <a href="#">电脑</a><span>/</span>
             <a href="#">办公</a>
         </div>
    </nav>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网易新闻列表</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        body{
             background-color: rosybrown;
        }
        a{
             text-decoration: none;
        }
        .news{
            width: 300px;
            height: 548px;
            background-color: whitesmoke;
            margin: 50px auto;
            border-top:2px solid rgb(184, 184, 184) ;
        }
        .news-title{
            display: inline-block;
            height: 40px;
            border-top: 2px red solid;
            margin-top:  -2px;
            padding-top: 10px;
        }
        .news-title a{
            color:black;
            /*设置文字加粗效果 */
            font-weight: bold;

        }
        .news-img{
            height: 300px;

        }
        .news-img .img-title{
            /* width: 150px; */
            margin-top: -30px;
            color: black; 
            font-weight: bold;
            /* margin-right: auto;
            margin-left: auto;       */
        }
        .news-img a{
            /* 居中 */
           text-align: center;
        }

        .news-list{
            margin-top: 20px;
            padding-left: 14px;
        }
        .news-list li{
            margin-bottom: 17px;
        }
        .news-list li a{
            font-size: 14px;
            color: #666;
        }
        .news-list li a:hover{
            color: red;
        }

        .news-list li::before{
            content: '■';
            color: rgb(214, 214, 214);
            font-size: 12px;
            margin-right: 3px;
        }
    </style>
  </head>
  <body>
    <div class="news">
      <h2 class="news-title"><a href="#">体育</a></h3>
      <div class="news-img">
        <a href="#">
          <img src="../IMG/4.jpg" alt="篮球" />
          <h3 class="img-title">李宁 吸湿PU 篮球</h3>
        </a>
      </div>
      <ul class="news-list">
        <li><a href=""> PU材质，防滑耐磨。</a></li>
        <li>
          <a href="">
            这款篮球采用PU材质，具有良好的防滑性，让你轻松应对各种场地。
          </a>
        </li>
        <li><a href=""> 另外，搭载防滑耐磨的中胎，能够有效的减少漏气</a></li>
        <li><a href=""> 让你的运动更加的安全</a></li>
      </ul>
    </div>
  </body>
</html>
_洋
关注
专栏目录
CSS入门 练习
DonkeyL's
02-19 2040
CSS入门 练习CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css&
CSS练习
毕业才是起点
04-09 1092
实现效果图 代码实现： <!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
CSS 练习项目教程
最新发布
gitblog_00658的博客
09-16 527
CSS 练习项目教程 css-exercises 项目地址: https://gitcode.com/gh_mirrors/cs/css-exercises 1. 项目的目...
css模板练习
11-18
在CSS的学习过程中，我们通常会接触到以下几个核心概念： 1. **选择器**：除了元素选择器外，还有类选择器（`.class`），ID选择器（`#id`），属性选择器（`[attribute=value]`），伪类（`:hover`, `:active`, `:...
简洁css布局练习dw网站模板下载
04-02
在本资源中，"简洁css布局"可能包含以下几个方面： 1. **盒模型**：理解CSS盒模型是进行布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 2. **定位机制**：如静态定位、相对定位、...
html5+css3练习.zip
05-28
新手在练习这个项目时，可以从以下几个方面入手： 1. 阅读并理解“index.html”的结构，学习如何使用HTML5的新元素。 2. 分析CSS3样式，了解如何通过选择器和属性来控制元素的样式和位置。 3. 探究图片资源是如何与...
html+css定位练习
08-05
在HTML和CSS的学习过程中，定位（Positioning）是至关重要的一个环节，它允许...通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能真正掌握这项技能。
CSS3练习
weixin_40794404的博客
07-09 565
CSS3练习 教材：CSS设计指南 文章目录CSS3练习思路1. 为盒模型添加阴影2. 将边界赋予圆角效果：3. 居中没有宽度的元素4.关于inline-block：5.过渡动画6.文本阴影7.CSS3 transform结果 思路 确定网页的布局与结构，将它们分割开来，先写出各个主要的结构化标记。 为包含整体的<body>标记等先添加一些基础的CSS，如font-family，background，margin等等，确定一个基准。 逐步对每个结构添加内容并进行样式化。 1. 为盒模型
css专项训练1
qq_48113035的博客
03-24 379
一、css单位 rpx是微信小程序中的单位，属于WXSS中的单位，不属于css单位。 WXSS：微信小程序中的css； WXML:微信小程序中的html； 二、display:inline-block;开启BFC，不与浮动元素重叠 下面代码wrap盒子的高度是多少（150px） <style type="text/css"> .a, .b, .c { box-sizing: border-box; border: 1px solid; } .wrap {
css的练习
2301_76602495的博客
06-07 219
子项22</li><li id="item23">子项23</li><li id="item1">子项1</li><li id="item2">子项2</li><a href="#">这是一个a链接</a><P class="P">这是一个省略号</P><li id="item3">子项3。<span>哈哈哈哈</span><li>子项31</li><li>子项32
css小练习
qq_43093230的博客
08-01 678
Div+CSS超级梦幻登陆界面 这是效果界面展示。 实现代码如下 html代码部分`. // <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>login</title> <link rel="stylesheet" h...
css优化训练方法,分享CSS代码写法优化方案
weixin_30978959的博客
08-03 262
众所周知,SEO优化很重要的一点就是布局,而DIV+CSS布局优于TABLE,接下来为大家简单介绍一下CSS代码写法优化。很多时候，特别是初学者写的CSS代码都会很多很多，让别人看起来很复杂！为了避免这种问题，有两种方法！第一：就是通过不断地训练，不断地写代码来优化自己的代码，另一种方法将是我要讲到的！要懂得优化自己的代码首先就必须知道CSS中的优先级，关于CSS的优先级我会在下一篇文章里讲到的，...
CSS练习实例
Roxannekkk的博客
10-26 176
1.练习一 实现如下效果 <style> a{ font-size:14px; color: CornflowerBlue; text-decoration: none; } div.menu { width:80px; border: 1px solid lightgray; margin-top:15px; position: absolute; left: 80px; top: 20px; } div.menu a{ display:block; font-size:14p
CSS详细介绍+练习
m0_46152474的博客
02-20 304
CSS渲染
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值