11.3课堂笔记和作业

本文详细介绍了CSS的基础知识,包括样式规则、加载方法、选择器、伪类及背景图片设置等内容,并通过具体案例展示了如何应用这些知识进行网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

11.3课堂笔记和作业

1、CSS样式规则与CSS加载的方法

1.1 CSS样式规则

CSS规则由两个主要部分组成:选择器以及一条或多条声明。

Selector    Declaration     Declaration
   h1  {   color:blue;   font-size:12px;}

每一个声明都是由一个属性和一个值组成。

1.2 CSS加载的方法

1.引入外部文件

<link href="outer.css" rel="stylesheet" type="text/css">
</link>

2.导入外部样式

<style type="text/css">
    @import "./outer.css";
</style>

3.使用内部CSS样式

<style type="text/css">
样式单文件定义
</style>

4.使用内联CSS样式

<div style="property1:value1;property2:value2;" >
</div>

内联样式只对单个标签有效,不会影响整个文件,在HTML元素中使用style属性定义内联样式。

2、选择器

2.1 通配符选择器

用*表示通配符,用来选择页面中所有元素的样式。

*{margin:0;}

2.2 类选择器

设置类class,用 . 来选择

.myclass=" .... ";

2.3 Id选择器

用#来选择,且id绝对不能有重复。

#myid{ .... }

2.4 包含选择器

包涵选择器用于指定处于某个选择器对应的内部元素。

.item .vip .vip{
    color:red;   
}

2.5 字选择器

子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

.item>.vip>.vip{
    color:red;   子选择器
}

2.6 群组选择器

群组选择器使用逗号对选择符进行分隔。

.item,.vip{
    color:red;   群组选择器
}

3、伪类

3.1 anchor伪类

链接的不同状态以不同的方式显示。

a:link{color:green;text-decoration:none;} /* 未访问链接*/
a:visited{color:red;text-decoration:none} /* 已访问链接 */
a:hover{color:yellow;text-decoration:underline;} /* 鼠标移动到链接上 */
a:active{color:blue;text-decoration:underline;}/* 鼠标点击时 */

注意:在CSS定义中,a:hover必须被置于a:link和a:visited之后a:active必须被置于a:hover之后,才是有效的。伪类的名称不区分大小写。

3.2 first-child伪类

first-child CSS伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。

3.3 first-line伪类

“first-line” 伪元素用于向文本的首行设置特殊样式。

3.4 before伪类

“before” 伪元素可以在元素的内容前面插入新内容。

4、CSS背景图片

4.1 添加图片

background-image 属性描述了元素的背景图像。
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

body{
    background-image:url('../img/c3.jpg');
}

4.2 水平或者垂直平铺

background-repeat属性控制背景图像的平铺重复效果。

body{
    background-repeat:no-repeat;
}

4.3 设置定位

可以利用 background-position 属性改变图像在背景中的位置。
body{
background-position:center center;
}

4.4 attachment属性

在默认情况下,组件里的背景图片会随着滚动条的滚动而自动滚动,我们要把background-attachment的属性设为fixed,那么背景图片就会被固定在该组件中,不会随滚动条的滚动而移动。

body{
    background-attachment:fixed;
}

4.5 设置背景图片尺寸

background-size属性指定背景图片大小。

body{
    background-size:100% 100%;
}

4.6 设置背景颜色

background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:

body{
        background-color:blue;
}

4.7 简写属性

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时,属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.

body{
    background:blue url('../img/c3.jpg') no-repeat fixed center center;
}

11.03作业

1. html部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Coffee Mune</title>
  <link type="text/css" rel="stylesheet" href="../css/list.css"></link>
 </head>
 <body>


  <h1 id="title">Coding Coffee欢迎您!</h1>

  <div class="parent">
    <div class="left">
        <img src="../img/c2.jpg">
    </div>

    <div class="right">
        <h2 id="smallTitle">蓝山咖啡</h2>
        <p id="theme">
            当季新品
        </p>

        <p id="bigTheme">
            给咖啡多一口热爱!
        </p>

        <p id="smallTheme">
            纯蓝山咖啡口感、香味较淡,但喝起来却非常香醇精致;
            具有贵族的品味,乃咖啡中之极品。
        </p>
    </div>
    <div style="clear:both;"></div>
  </div>


  <div class="parent">
    <div class="left">  
        <img src="../img/c5.jpg">
    </div>

    <div class="right">
        <h2 id="smallTitle">卡布其诺</h2>
        <p id="theme">
            美好邂逅
        </p>

        <p id="bigTheme">
            给咖啡多一口热爱!
        </p>

        <p id="smallTheme">
            卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶
            相混合的意大利咖啡。此时咖啡的颜色,就象卡布奇诺教会的
            修士在深褐色的外衣上覆上一条头巾一样,咖啡因此得名。
        </p>
    </div>
    <div style="clear:both;"></div>
  </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c6.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">拿铁咖啡</h2>

            <p id="theme">
                经典再现
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱!
            </p>

            <p id="smallTheme">
                拿铁是最为国人熟悉的意式咖啡品项,它是在沉厚浓郁的意式
                浓缩咖啡中,加入牛奶等调和,甚至更多牛奶的花式咖啡,有了
                牛奶的温润调味,让原本甘苦的咖啡变得柔滑香甜、甘美浓郁。
            </p>
        </div>
        <div style="clear:both;"></div>
    </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c4.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">欧蕾咖啡</h2>
            <p id="theme">
                恬淡悠闲
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱!
            </p>

            <p id="smallTheme">
                欧蕾咖啡最大的特点就是它要求牛奶和浓缩咖啡一同注入杯中,
                牛奶和咖啡在第一时间相遇,碰撞出的是一种闲适自由的心。
            </p>
        </div>

        <div style="clear:both;"></div>
    </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c7.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">猫屎咖啡</h2>
            <p id="theme">
                奢华享受
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱!
            </p>

            <p id="smallTheme">
                麝香猫咖啡(Kopi Luwak),又称猫屎咖啡,它是由麝香猫
                在吃完咖啡果后把咖啡豆原封不动的排出,人们把它的粪便
                中的咖啡豆提取出来后进行加工而成。
            </p>
        <div>
        <div style="clear:both;"></div>
    </div>

 </body>
</html>

2. CSS部分



        body{
            background-color:#fdffff;
        }

        #title{
            color:green;
            font-size:60px;
            text-align:center;
        }

        #smallTitle{
            color:blue;
            font-size:35px;
            text-align:center;
        }

        #theme{
            color:#ff8040;
            font-size:15px;
        }

        #bigTheme{
            color:#00aeae;
            font-size:30px;
        }

        #smallTheme{
            font-size:20px;
            font-family:"Times New Roman";
        }

        .parent{
            width:900px;
            height:400px;
            /*border:2px solid red;*/
            margin:0 auto;
            background-color:#fbfffd;
        }

        .left{
            float:left;
            width:400px;
            height:400px;
        }
        .right{
            float:right;
            width:450px;
            height:400px;
        }
内容概要:本文档详细介绍了基于Python的在线二手电子产品回收系统的设计与实现。项目旨在通过构建一个可靠、安全、透明的平台,提高废旧电子产品的回收率,推动资源的合理再利用,提供安全可靠的交易平台,加强环保意识,促进二手市场的发展,并实现数据驱动的智能化服务。项目面临的主要挑战包括废旧电子产品的检测与评估、信息不对称与交易风险、市场需求的预测与定价、用户体验优化及平台的安全性与数据保护。解决方案涵盖智能化评估与回收定价、高效的二手产品处理流程、完善的售后保障体系、创新的市场需求分析、全程透明化与安全性保障以及定制化用户体验。系统采用微服务架构,包括用户管理、商品评估、交易管理、数据分析、支付与结算等模块。项目还涉及前端界面设计、API接口开发、数据库设计与实现、模型训练与优化、部署与应用等方面。 适合人群:具备一定编程基础,特别是对PythonWeb开发有一定了解的研发人员,以及对二手电子产品回收环保事业感兴趣的从业者。 使用场景及目标:①帮助用户方便地将闲置电子产品回收、交易或再利用,提高废旧电子产品的回收率;②通过智能化的数据分析为用户提供价格评估、市场需求分析等服务,提高回收效率;③提供安全可靠的交易平台,确保交易的公平性安全性;④推动二手市场的健康发展,为消费者提供经济实惠的产品选择;⑤增强公众的环保意识,推动社会向绿色、低碳方向发展。 其他说明:本文档不仅提供了系统的功能模块设计、数据库表结构、API接口规范,还展示了具体代码实现GUI界面设计,为开发者提供了全面的技术参考。此外,项目强调了数据安全隐私保护的重要性,确保平台在运行过程中能够有效保护用户信息。项目未来改进方向包括增强模型的精准度、拓展国际市场、提供更多支付融资选项、跨平台数据集成与分析、更加智能的回收流程以及强化社交化与社区功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值