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,样式对网页中元素 ...
随机推荐
- form表单 post 请求打开新页面
function postOpenWindow(URL, PARAMS, target) { if(target == null) target = "_blank"; var t ...
- Vue+Webpack打包之后超过url-loader大小限制的图片在css的background-image中使用路径问题
一个vue项目中有一张图片,在css中background-image中使用,大小超过了url-loader大小限制.npm run dev的时候一切正常.npm run build之后图片被直接放在 ...
- 进阶之路 | 奇妙的Animation之旅
前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 学习清单: 动画的种类 自定义View动画 View动画的特殊使用场景 属性动画 使用动画的注意事项 一.为什 ...
- c# 匿名方法(函数) 匿名委托 内置泛型委托 lamada
匿名方法:通过匿名委托 .lamada表达式定义的函数具体操作并复制给委托类型: 匿名委托:委托的一种简单化声明方式通过delegate关键字声明: 内置泛型委托:系统已经内置的委托类型主要是不带返回 ...
- Android中点击按钮获取星级评分条的评分
场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改为Lin ...
- author模块
一.auth模块简介 1.什么是auth模块,auth模块主要是解决什么问题 还是那句话,‘没有无缘无故的爱,也没有无缘无故的恨 凡是必有因’, 像我们开发一个网站,不可避免的设计网络用户系统,比 ...
- 最新咕咆+鲁班+图灵+享学+蚂蚁+硅谷+源码 Java架构师资料《Java架构师VIP课程》
最新的Java架构师完整资料,完整视频+源码+文档. 每一套都是一百多个G的资料,无密. JAVA架构师全套课程 咕泡学院互联网架构师第一期 咕泡学院互联网架构师第二期 咕泡学院互联网架构师第三期 博 ...
- 『后缀自动机入门 SuffixAutomaton』
本文的图片材料多数来自\(\mathrm{hihocoder}\)中详尽的\(SAM\)介绍,文字总结为原创内容. 确定性有限状态自动机 DFA 首先我们要定义确定性有限状态自动机\(\mathrm{ ...
- 汇桔网被曝拖欠12月份工资至今,强制买产品,CEO称去年交易额超400亿
三言财经消息,近日有汇桔网员工爆料,汇桔网拖欠12月工资至今,通知延迟到4月才发放. 此外爆料还指出,"各种手法逼迫大家离开,员工要么继续忍受,要么主动离职,要么停薪留职.都不同意只能仲裁. ...
- 阿里云K8S下玩.NET CORE 3.1
1. 创建阿里云K8S集群,本文以标准托管集群为例 1.1 创建一个 2台 centos 2core 4G的 k8s 集群 1.2 创建成功的模样 2. 创建 asp.net core webapi项 ...