CSS的列表样式和网页背景
CSS的列表样式
1. 设置title和列表
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="标题">全部商品分类</h1>
<ul class="JS_navCtn cate_menu">
<li>
<a href="#">家用电器</a> <a href="#">手机</a> <a href="#">运营商</a>
</li>
<li>
<a href="#">数码</a> <a href="#">电脑</a> <a href="#">办公</a>
</li>
<li>
<a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a>
</li>
</ul>
</body>
</html>
CSS:
.标题 {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: rgba(255, 235, 61, 0.53);
}
ul li {
/*设置行高*/
height: 30px;
/*去掉列前的圆点*/
list-style-type: none;
background: rgba(255, 122, 205, 0.64);
}
效果:
2. div标签
<div> 标签定义HTML文档中的一个分隔区块或者一个区域部分。
div本身没大小,需要设置个大小。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1 class="标题">全部商品分类</h1>
<ul class="JS_navCtn cate_menu">
<li>
<a href="#">家用电器</a> <a href="#">手机</a> <a href="#">运营商</a>
</li>
<li>
<a href="#">数码</a> <a href="#">电脑</a> <a href="#">办公</a>
</li>
<li>
<a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
#nav{
width: 300px;
background: rgba(255, 122, 205, 0.64);
}
.标题 {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: rgba(255, 235, 61, 0.53);
}
ul li {
/*设置行高*/
height: 30px;
/*去掉列前的圆点*/
list-style-type: none;
}
效果:
CSS的网页背景
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
CSS:
div{
width: 2000px;
height: 1400px;
border: 1px solid red;
background-image: url("image/背景图片.jpg");/*默认平铺*/
}
.div1{
background-repeat:repeat-x; /*x方向上平铺*/
}
.div2{
background-repeat:repeat-y; /*x方向上平铺*/
}
.div3{
background-repeat:no-repeat; /*不平铺*/
}
效果:
CSS的列表样式和网页背景的更多相关文章
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- CSS 常用列表样式
CSS 常用列表样式 CSS没学扎实,复习记录一下.下面是一些常用的属性 list-style-image 指定一个图片作为列表项的标记 默认值none,可设置为图片的url list-style-i ...
- CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- css 单选框 样式 填充自定义背景 after
input[type='radio'] //width 16px //height 16px display none //input[type='radio']:chcked // backgoun ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- CSS元素、边框、背景、列表样式
一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两 ...
- CSS背景样式和列表样式
background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...
- css背景|列表样式
背景样式 背景区包含内容.padding 和 boder 不包含外边距 background-color 设置元素的背景颜色 background-image 把图像设置为背景,包含内边距和边框,不包 ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
随机推荐
- c++ 有符号int和无符号int做加减乘除问题
c++ 有符号int和无符号int做加算术运算的问题: 一.运算过程先把有符号的补码数直接看成无符号数,在和无符号数进行算术运算 二.int和unsigned int类型进行混合算数运算时,运算结果为 ...
- 1、SSH无密码访问
1.在需要无密码登录远程服务器的机器上(如A→B服务器)生成密码对 A:服务器操作: ssh-keygen -t rsa :输出的内容直接一路回车即可(enter) 执行上面一步,会在~/.ssh目录 ...
- SpringBoot缓存 --(二)Redis单机缓存
pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 软考复习之UML设计篇
UML统一建模语言 构件图:描述系统的物理结构,它可以用来显示程序代码如何分解成模块 部署图:描述系统中硬件和软件的物理结构,它描述构成系统架构的软件构件,处理器和设备 用例图:描述系统与外部系统及用 ...
- JDK13.0.1安装与环境变量的配置(Win10平台为例)
一.下载与安装 Oracle官网下载:https://www.oracle.com/technetwork/java/javase/downloads/index.html,点击右侧下载 接受并下载对 ...
- SP1805 HISTOGRA - Largest Rectangle in a Histogram
--------------------------------------------------- 我就是想学个单调栈然后全网都是个蓝题 ----------------------------- ...
- P4197 Peaks [克鲁斯卡尔重构树 + 主席树][克鲁斯卡尔重构树学习笔记]
Problem 在\(Bytemountains\)有\(n\)座山峰,每座山峰有他的高度\(h_i\) .有些山峰之间有双向道路相连,共\(M\)条路径,每条路径有一个困难值,这个值越大表示越难走, ...
- Vue中data元素之间相互赋值的陷阱
今天在整理代码时,遇到这样的一个场景,下面将结合示例说明: (一)在Vue文件中定义一个const常量,如下图所示: (二)在data中有三个元素是这样赋值的,如下图所示: (三)在created() ...
- export default和export的使用方法
Node中 向外暴露成员,使用module.exports和exports module.exports = {} Node中导入模块 var 名称 = require('模块标识符') 在ES6中 ...
- 数据结构(集合)学习之Map(二)
集合 框架关系图 补充:HashTable父类是Dictionary,不是AbstractMap. 一:HashMap中的链循环: 一般来说HashMap中的链循环会发生在多线程操作时(虽然HashM ...