初学CSS

最新推荐文章于 2024-06-28 14:02:41 发布
最新推荐文章于 2024-06-28 14:02:41 发布
阅读量127 收藏 1
点赞数
分类专栏： 笔记 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51552328/article/details/125374318
版权

1、花千骨

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    #jituan{
        color: red;
    }
    #zhuyan1{
        color: blue;
    }
    #teyan{
        color: orange;
    }
    #zhuyan2{
        color: green;
    }
    #weishi{
        color: orange;
    }
    h1{
        color: #0056b3;
    }
    .tu2{
        display: inline-block;

    }
    #tu1 img{
        height: 162px;
        width: 102px;
    }
    </style>
</head>
<body>
<h1>花千骨</h1>
<p>
    《花千骨》是由 <u id="jituan">慈文传媒集团</u>制作并发行，<span id="zhuyan1">林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖</span>领衔主演，<span id="teyan">蒋欣、杨烁</span>特别出演，<span id="zhuyan2">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。 该剧于2015年6月9日起每周二、周三晚10点在 <span id="weishi">湖南卫视</span>的钻石独播剧场播出。[3] 2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]
</p>
<div id="tu1">
    <img src="./img/1.jpg" alt="">
</div>
<h1>主要演员</h1>
<div class="tu2">
    <div class="tu2">
        <img src="./img/2.jpg" alt="">
    </div>
    <div class="tu2">
        <img src="./img/3.jpg" alt="">
    </div>
</div>
</body>
</html>

在这里插入图片描述
2、商品分类

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color: gainsboro;
        }
        #container{
            width: 230px;
            background-color: white;
            margin: 10px auto;
            font-family: 宋体;
        }
        #title{
            background-color: black;
            color: white;
            line-height: 35px;
            height: 35px;
            padding-left: 20px;
            font-weight: bold;
        }
        dl{
            border-bottom: 1px dashed darkgray;
            padding: 5px;
            font-size: 12px;
        }
        dl dt{
            font-weight: bold;
            padding-left: 25px;
            height: 30px;
            line-height: 30px;
        }
        dl:first-of-type dt{
            background: url("./图片素材/icon_01.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(2) dt{
            background: url("./图片素材/icon_02.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(3) dt{
            background: url("./图片素材/icon_03.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(4) dt{
            background: url("./图片素材/icon_04.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(5) dt{
            background: url("./图片素材/icon_05.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(6) dt{
            background: url("./图片素材/icon_06.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(7) dt{
            background: url("./图片素材/icon_07.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(8) dt{
            background: url("./图片素材/icon_08.gif") 0px -3px no-repeat;
        }
        dl:nth-of-type(9) dt{
            background: url("./图片素材/icon_09.gif") 0px -3px no-repeat;
        }
        dl:last-child{
            border-bottom: none;
        }
        dl dd{
            line-height: 20px;
        }
        dl dd a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="title">全部分类</div>
        <dl>
            <dt>护肤</dt>
            <dd>
                <a href="#">洁面</a>
                <a href="#">化妆水</a>
                <a href="#">喷雾</a>
                <a href="#">美容液</a>
                <a href="#">眼霜</a>
                <a href="#">眼部精华</a>
                <a href="#">眼膜</a>
                <a href="#">面膜</a>
                <a href="#">面膜贴</a>
                <a href="#">水洗面膜</a>
                <a href="#">免洗面膜</a>
                <a href="#">精华</a>
                <a href="#">精油</a>
                <a href="#">啫哩</a>
                <a href="#">凝霜</a>
                <a href="#">乳液</a>
                <a href="#">面霜</a>
                <a href="#">日霜</a>
                <a href="#">晚霜</a>

            </dd>
        </dl>
        <dl>
            <dt>彩妆</dt>
            <dd>
                <a href="#">卸妆</a>
                <a href="#">防晒</a>
                <a href="#">隔离</a>
                <a href="#">BB霜</a>
                <a href="#">粉底</a>
                <a href="#">粉饼</a>
                <a href="#">睫毛膏</a>
                <a href="#">眼影</a>
                <a href="#">唇彩</a>
                <a href="#">腮红</a>
                <a href="#">眼线笔</a>
                <a href="#">底妆</a>
                <a href="#">遮瑕</a>
                <a href="#">蜜粉</a>
                <a href="#">眉笔</a>
                <a href="#">美甲</a>
            </dd>
        </dl>
        <dl>
            <dt>香氛</dt>
            <dd>
                <a href="#">男香</a>
                <a href="#">女香</a>
                <a href="#">小Q装</a>
                <a href="#">中性香水</a>
            </dd>
        </dl>
        <dl>
            <dt>身体护理</dt>
            <dd>
                <a href="#">洗发</a>
                <a href="#">护发</a>
                <a href="#">沐浴</a>
                <a href="#">身体乳</a>
                <a href="#">手足护理</a>
                <a href="#">护手霜</a>
                <a href="#">纤体</a>
                <a href="#">身体精油</a>
                <a href="#">颈部护理</a>
                <a href="#">个人护理</a>
                <a href="#">卫生用品</a>
                <a href="#">脱毛</a>
            </dd>
        </dl>
        <dl>
            <dt>礼盒套装</dt>
            <dd>
                <a href="#">护肤套装</a>
                <a href="#">身体护理套装</a>
                <a href="#">彩妆套装</a>
                <a href="#">旅行装</a>
                <a href="#">香水套装</a>
                <a href="#">男士套装</a>
            </dd>
        </dl>
        <dl>
            <dt>美容工具</dt>
            <dd>
                <a href="#">护肤</a>
                <a href="#">彩妆</a>
                <a href="#">美发</a>
                <a href="#">美体</a>
                <a href="#">美甲</a>
                <a href="#">美容仪器</a>
                <a href="#">其他美容工具</a>
            </dd>
        </dl>
        <dl>
            <dt>母婴专区</dt>
            <dd>
                <a href="#">奶粉</a>
                <a href="#">尿裤湿巾</a>
                <a href="#">母婴洗护</a>
            </dd>
        </dl>
        <dl>
            <dt>男士专区</dt>
            <dd>
                <a href="#">洁面</a>
                <a href="#">爽肤水</a>
                <a href="#">面霜</a>
                <a href="#">啫哩</a>
                <a href="#">男香</a>
                <a href="#">眼霜</a>
                <a href="#">凝胶</a>
                <a href="#">乳液</a>
                <a href="#">精华</a>
                <a href="#">沐浴</a>
            </dd>
        </dl>
        <dl>
            <dt>食品保健</dt>
            <dd>
                <a href="#">瘦身类</a>
                <a href="#">保健类</a>
                <a href="#">美容类</a>
                <a href="#">食品类</a>
            </dd>
        </dl>
    </div>
</body>
</html>

在这里插入图片描述

3、超市商品

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body,ul,li,a{
            margin: 0px;
            padding: 0px;
        }
        ul{
            border: 2px solid orange;
            width: 180px;
        }
        ul li{
            border-bottom: 1px dashed black;
            font-size: 12px;
            height: 50px;
            line-height: 50px;
            padding-left: 50px;
            font-weight: bold;
        }
        ul li a{
            text-decoration: none;
            color: black;
        }
        ul li a:hover{
            color: orange;
        }
        ul li:first-of-type{
            background: url("./img/icon_01.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(2){
            background: url("./img/icon_02.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(3){
            background: url("./img/icon_03.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(4){
            background: url("./img/icon_04.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(5){
            background: url("./img/icon_05.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(6){
            background: url("./img/icon_06.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(7){
            background: url("./img/icon_07.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(8){
            background: url("./img/icon_08.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(9){
            background: url("./img/icon_09.jpg") 5px 0px no-repeat;
        }
        ul li:nth-of-type(10){
            background: url("./img/icon_10.jpg") 5px 0px no-repeat;
        }
        ul li:last-child{
            border-bottom:none;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">酒水、饮料</a>
        </li>
        <li>
            <a href="#">进口食品</a>
        </li>
        <li>
            <a href="#">休闲零食</a>
        </li>
        <li>
            <a href="#">地方特产</a>
        </li>
        <li>
            <a href="#">保健、冲调</a>
        </li>
        <li>
            <a href="#">粮油、生鲜</a>
        </li>
        <li>
            <a href="#">美容洗护</a>
        </li>
        <li>
            <a href="#">清洁洗涤</a>
        </li>
        <li>
            <a href="#">母婴、纸品</a>
        </li>
        <li>
            <a href="#">家居百货</a>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述
4、孵化小组

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body,div,ul,li,a{
            margin: 0px;
            padding: 0px;
        }
        #container{
            background: url("./img/trendTopBg.gif") 0px 0px no-repeat;
            width: 200px;
            margin: 10px auto;
        }
        #title{
            height: 35px;
            line-height: 35px;
            padding: 10px 50px;
            color: white;
            background: url("./img/bg.gif") 10px 5px no-repeat;
        }
        ul li{
            list-style: none;
            background: url("./img/dotBg.gif") 0px 0px no-repeat;
            height: 32px;
            line-height: 32px;
            padding-left: 20px;
        }
        ul li a{
            text-decoration: none;
            font-family: 宋体;
        }
        #foot{
            background: url("./img/trendEndBg.jpg") 0px 0px no-repeat;
            height: 12px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="title">孵化小组信息</div>
        <ul>
            <li>
                <a href="#">10月20日：java经营部</a>
            </li>
            <li>
                <a href="#">10月20日：java经营部</a>
            </li>
            <li>
                <a href="#">10月20日：java经营部</a>
            </li>
            <li>
                <a href="#">10月20日：java经营部</a>
            </li>
            <li>
                <a href="#">10月20日：java经营部</a>
            </li>
        </ul>
        <div id="foot"></div>
    </div>
</body>
</html>

在这里插入图片描述
5、化妆品导航

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color: #EEE7E1;
        }
        #container{
            width: 280px;
            background-color: white;
        }
        #title{
            background-color: #E9185A;
            color: white;
            font-size: 18px;
            line-height: 35px;
            height: 35px;
            padding: 0px 15px;
            font-weight: bold;
        }
        ul li{
            list-style: none;
            border-bottom: 1px dashed darkgray;
            padding: 5px;
            font-size: 12px;
        }
        ul li a{
            color: gray;
            text-decoration: none;
        }
        ul li a span{
            background: url("./img/dot_01.gif") -1px -2px no-repeat;
            width: 27px;
            height: 24px;
            display: inline-block;
            padding-left: 8px;
            color: white;
        }
        ul li:hover{
            color:#E9185A;
        }
        ul li:hover a{
            color: #E9185A;
        }
        ul li:hover a span{
            background: url("./img/dot_02.gif") -1px -2px no-repeat;
        }
        ul li:hover div{
            display: block;
        }
        ul li div{
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="title">大家都是喜欢彩妆</div>
        <ul>
            <li>
                <a href>
                    <span>1</span>
                    Za姬苒新能真皙美白隔离霜 35g
                </a>
                <div>
                    <img src="./img/icon-1.jpg" alt="">
                    <p>$1245  xxx</p>
                </div>
            </li>
            <li>
                <a href>
                    <span>2</span>
                    Za姬苒新能真皙美白隔离霜 35g
                </a>
                <div>
                    <img src="./img/icon-2.jpg" alt="">
                    <p>$1245  xxx</p>
                </div>
            </li>
            <li>
                <a href>
                    <span>3</span>
                    Za姬苒新能真皙美白隔离霜 35g
                </a>
                <div>
                    <img src="./img/icon-3.jpg" alt="">
                    <p>$1245  xxx</p>
                </div>
            </li>
            <li>
                <a href>
                    <span>4</span>
                    Za姬苒新能真皙美白隔离霜 35g
                </a>
                <div>
                    <img src="./img/icon-4.jpg" alt="">
                    <p>$1245  xxx</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

RainstarQAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML CSS 初学的练习.zip
12-30
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习...
css：全栈开发之初学css和对stylus的初步掌握
02-23
初学者在学习CSS时，首先要理解其基本概念和语法，包括选择器、属性和值，这些都是创建网页样式的基石。 1. **选择器**：CSS通过选择器来定位HTML或XML文档中的元素。基础的选择器有类型选择器（如`div`）、ID选择...
css3满天金光飞舞效果,CSS3金光四射的钥匙
weixin_28835551的博客
08-04 459
CSS语言：CSSSCSS确定body {-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;background-color: #222;font-family: "proxima-nova-soft";font-size: 0;color: #424950;-webkit-user-select: non...
花千骨html+css
weixin_51967087的博客
09-18 2109
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/花千骨.css"/> </head> <body> <h2>花千骨</h2> <p> ...
CSS
qq_27630677的博客
12-28 166
csscss的概念css的优势css的基本语法css基本语法结构style标签引入css样式的几种方式行内样式内部样式表外部样式表CSS样式优先级CSS3基本选择器标签选择器类选择器ID选择器小结示例 css的概念     Cascading Style Sheet 级联样式表     表现HTML或XHTML文件样式的计算机语言     包括对字体，颜色，编距，高度，宽度，背景图片，网页
html与css作业
wuwei_19981001的博客
10-02 287
html css
初学CSS发光圆形背景
https://github.com/blingbling-110
08-10 1044
利用radial-gradient() CSS函数实现 示例： <div></div> div { width: 300px; height: 300px; background: radial-gradient(circle at top, orange, transparent 40%); /* 便于观察DOM */ border: solid 1px black; }
初学css
iteye_6260的博客
09-06 87
记录下：http://www.web600.net/html/editor/XHTMLCSS/200906218_12.html
初学CSS样式表特征
laiPiShe的博客
10-28 111
初学CSS 1.CSS样式表特征 继承性 大多数CSS的样式规则可以被继承 层叠性 可以定义多个样式 不冲突时，多个样式表中的样式可层叠为一个 优先级 样式定义冲突时，按照不同样式规则的优先级来应用样式 1.代码冲突，后面优先 2.连接的方式冲突，就近原则（内嵌===内部或外部） 3.冲突（选择器优先级） ...
初学HTML与CSS一
05-31
初学HTML与CSS一
初学CSS样式让一行显示两行文字及删除线颜色改变的探索（第一次写博客求指点）
01-20
突然看到一段这样的样式，也是因为正在学网页设计，所以突发奇想，想用网页设计也做出这样的效果。 在我首先拿到图的时候，想了想最难的地方可能就是如何让两行文字在一行显示。 第一个想到的是用定义上下标的形式 ...
初学css制作的按钮变色
02-01
本教程将针对初学者，详细讲解如何使用CSS来实现按钮在鼠标悬停时的颜色变化效果。 首先，我们要理解CSS选择器的基本概念。选择器是CSS用来定位HTML元素的工具，比如`<button>`标签就是一个常见的HTML元素。在我们...
CSS中的display属性：布局控制的关键
一起coding，一起嗨。
06-25 767
CSS中的display属性：布局控制的关键
html5+css简易实现图书网联系我们页面
爱吃Java的羊的博客
06-25 287
html5+css简易实现图书网联系我们页面。
CSS实现文字颜色渐变
最新发布
weixin_40348267的博客
06-28 299
【代码】CSS实现文字颜色渐变。
前端 CSS 经典：保持元素宽高比
weixin_64684095的博客
06-25 202
在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。
CSS基础汇总
huamengyyds的博客
06-27 485
标签选择器通过标签名找标签（把指定的样式应用到某一个、组、类标签上）id选择器通过id属性值找标签，关键符号#id值{样式}复合选择器1、并列选择器：关键符号，用法：选择器1，选择器2{样式}2、后代选择器：符号空格，用法：选择器1空格选择器23、属性选择器：选择器[属性=属性值]{样式}4、筛选：用法：选择器class选择器选择器的优先级：1、内联　　　　　　　　2、id选择器　　　　　　　 3、class选择器　　　　　　　　4、标签选择器　　　　　　　　5、通用选择器1、有关字体的设置: 1.font
css基础设置效果初学基本例题
04-26
好的，您想了解CSS基础设置效果的初学基本例题，以下是一个简单的例子，可供参考： 假设我们有一个HTML页面，里面包含一个段落。我们希望改变这个段落的颜色、背景色、边框、字体和大小等属性。 1. 改变字体和大小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值