《活着》
余华
最新推荐
《百年孤独》
加西亚·马尔克斯
《嫌疑人X的献身》
东野圭吾
- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/05/23 03:10作者：小小人气：
在网页设计中，css（层叠样式表）是必不可少的一部分。而在CSS3之前，CSS选择器仅有基本选择器、类选择器、ID选择器和后代选择器等四种。而现在，在CSS3中新增加了更多的选择器。
1. 基本选择器
基本选择器是指，可以根据元素的名称、ID、类来选择元素。在html中，元素名称对应标签名，ID和类属性是可以通过该属性值来进行样式控制的。
用法示例：
``` p /*选择所有的段落*/ #header /*选择id为header的元素*/ .homepage /*选择class为homepage的元素*/ ```
2. 后代选择器
后代选择器是指，可以选择元素的后代元素。这种选择器从右到左选择元素，最右侧的元素是选择器要选的元素。
用法示例：
``` header nav li /*选择header元素下的nav元素下的所有li元素*/ ```
3. 子元素选择器
子元素选择器是指，选择指定元素的直接子元素。这种选择器是应用于标签上的选择器，两个标签之间有大于号（>）分隔。
用法示例：
``` nav > li /*选择nav元素下的所有直接子元素li*/ ```
4. 相邻兄弟选择器
相邻兄弟选择器是指，选择指定元素后面的相邻兄弟元素。
用法示例：
``` h3 + p /*选择紧邻h3元素之后的p元素*/ ```
5. 通用选择器
通用选择器是指，可以选择任何元素。它用一个星号（*）表示。
用法示例：
``` * /*选择所有元素*/ ```
6. 属性选择器
属性选择器是指，可以根据元素的属性值来选择元素。它有两种类型：属性选择器（可以选择有某个属性的元素）和属性值选择器（可以选择某个属性值的元素）。
用法示例：
``` input[type="text"] /*选择所有type属性值为text的input元素*/ a[href$=".pdf"] /*选择所有href属性以“.pdf”为结尾的a元素*/ ```
7. 伪类选择器
伪类选择器是指，可以根据元素的状态来选择元素（如hover、active等）。伪类选择器以冒号（:）开头。
用法示例：
``` a:hover /*选择鼠标悬停在a元素上的状态*/ ```
8. 伪元素选择器
伪元素选择器是指，可以在元素的前面或后面添加额外的样式（如添加装饰性元素等）。伪元素选择器以双冒号（::）开头。
用法示例：
``` p::before /*在每个段落前面添加装饰性元素*/ p::after /*在每个段落后面添加装饰性元素*/ ```
以上就是常见的CSS选择器类型及其用法特点，设计者需要根据需要灵活应用这些选择器来设置样式，以实现设计的效果。
HTML+CSS网页设计成品
以下是一种以HTML+CSS为基础的网页设计成品，主题为“书香阁”，目标是打造一个简约而雅致的图书网站。
HTML结构：
```
余华
加西亚·马尔克斯
东野圭吾
CSS样式：
``` /*全局样式*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } /*头部*/ header { background-color: #f1f1f1; display: flex; justify-content: space-between; align-items: center; padding: 20px; } h1 { font-size: 32px; font-weight: bold; } nav ul { display: flex; } nav ul li { margin-left: 30px; } nav ul li:first-child { margin-left: 0; } nav a { color: #333; text-decoration: none; font-size: 18px; padding: 10px; border-bottom: 2px solid transparent; } nav a:hover { border-color: #333; } nav a.active { border-color: #333; font-weight: bold; } /*主体*/ main { max-width: 1000px; margin: 50px auto; display: flex; justify-content: space-between; } section { width: 48%; } section h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } article { display: flex; align-items: center; margin-bottom: 20px; } article img { width: 100px; height: 120px; object-fit: cover; margin-right: 20px; } article h3 { font-size: 20px; } article p { font-size: 16px; color: #999; } ul { list-style: none; } ul li { margin-bottom: 10px; } ul a { text-decoration: none; color: #333; font-size: 16px; display: inline-block; padding: 5px 10px; background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 5px; transition: background-color 0.2s ease-in-out; } ul a:hover { background-color: #ccc; } /*底部*/ footer { text-align: center; background-color: #f1f1f1; padding: 20px; } footer p { color: #999; font-size: 14px; } ```
“书香阁”网页设计成品预览图：
总体来说，这个网页设计具有简洁而精致的特点。其中，采用了灰白色调来渲染整体氛围，并在页面顶部加入导航栏来方便用户的浏览和查找。在主体部分，采用了两个并列的区域，左侧为最新推荐，右侧为热门分类。每个推荐区域都以一张图片、书名、作者名的形式展示，每个分类区域则以列表的形式呈现，其中每个分类项均可点击。整个页面结构简单明了，具有很好的可操作性和美感。
