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,样式对网页中元素 ...
随机推荐
- Windows环境下Nginx配置本地虚拟域名
进入conf文件夹,新建servers文件夹: 将内部的server配置段提取单独放在一个文件里,存到了conf/servers下,以方便配置多个虚拟主机. 并在nginx.conf里http配置段内 ...
- a标签没有闭合引起自动插入很多a标签的问题
a标签中间没有内容的情况下,很容易忽略闭合 a标签一定要闭合,否则会在后面每个div后面插入同一个a标签 要以如下形式闭合: <div class="v5-index-containe ...
- Properties(hashtable的子类)
Properties: Properties是hashtable的子类(在java.util包中).该集合的特点:可以用于键值对形式的配置文件,且不允许Key重复,若有重复的,后者会覆盖前者. 也就是 ...
- 使用Nginx对.NetCore站点进行反向代理
前言 之前的博客我已经在Linux上部署好了.NetCore站点且通过Supervisor对站点进行了进程守护,同时也安装好了Nginx.Nginx的用处非常大,还是简单说下,它最大的功能就是方便我们 ...
- React Native运行出现Could not find "iPhone X" simulator
打开项目文件夹下 node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 查找 if (!version.startsW ...
- Eversipn STT-MRAM的MJT细胞
业界一直在寻求取代SRAM.其中之一包括自旋转移力矩MRAM(STT-MRAM).新的存储器带来了一些大胆的主张.例如STT-MRAM具有SRAM的速度和闪存的无波动性,具有无限的耐用性. 图1.ST ...
- 从零开始一个个人博客 by asp.net core and angular(一)
这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所 ...
- 为NuGet配置微软官方中国镜像
NuGet微软官方中国镜像地址: https://nuget.cdn.azure.cn/v3/index.json 打开Visual Studio => 工具 => NuGet包管理器 = ...
- 【转】JS 的 new 到底是干什么的?
原文:https://zhuanlan.zhihu.com/p/23987456?refer=study-fe 大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不 ...
- vim 进化 编码问题
" 解决菜单乱码 source $VIMRUNTIME/delmenu.vim source $VIMRUNTIME/menu.vim " 防止文件显示乱码 set fileenc ...