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>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">运营商</a>
   </li>

   <li>
       <a href="#">数码</a>&nbsp;&nbsp;<a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>
   </li>

   <li>
       <a href="#">家居</a>&nbsp;&nbsp;<a href="#">家具</a>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">运营商</a>
       </li>

       <li>
           <a href="#">数码</a>&nbsp;&nbsp;<a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>
       </li>

       <li>
           <a href="#">家居</a>&nbsp;&nbsp;<a href="#">家具</a>&nbsp;&nbsp;<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的列表样式和网页背景的更多相关文章

  1. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  2. CSS 常用列表样式

    CSS 常用列表样式 CSS没学扎实,复习记录一下.下面是一些常用的属性 list-style-image 指定一个图片作为列表项的标记 默认值none,可设置为图片的url list-style-i ...

  3. CSS:列表样式(设置列表项的标志图案/位置)

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  4. css 单选框 样式 填充自定义背景 after

    input[type='radio'] //width 16px //height 16px display none //input[type='radio']:chcked // backgoun ...

  5. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  6. CSS元素、边框、背景、列表样式

    一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两 ...

  7. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

  8. css背景|列表样式

    背景样式 背景区包含内容.padding 和 boder 不包含外边距 background-color 设置元素的背景颜色 background-image 把图像设置为背景,包含内边距和边框,不包 ...

  9. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

随机推荐

  1. React之深入了解虚拟DOM

    JS在手机中也可运行,React Native通过将虚拟DOM转换为底层的原生组件,即可在手机端运行,在浏览器运行时,只需要将虚拟DOM转换为真实DOM即可运行,虚拟DOM就是将真实DOM转换为JS对 ...

  2. 《Java 8 in Action》Chapter 11:CompletableFuture:组合式异步编程

    某个网站的数据来自Facebook.Twitter和Google,这就需要网站与互联网上的多个Web服务通信.可是,你并不希望因为等待某些服务的响应,阻塞应用程序的运行,浪费数十亿宝贵的CPU时钟周期 ...

  3. HTML连载68-形变中心点、形变中心轴

    一. 形变中心点介绍 <style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 ...

  4. MySQL必知必会--分 组 数 据

    数据分组 目前为止的所有计算都是在表的所有数据或匹配特定的 WHERE 子句的 数据上进行的.提示一下,下面的例子返回供应商 1003 提供的产品数目 但如果要返回每个供应商提供的产品数目怎么办?或者 ...

  5. PMP--3. 项目启动过程组

    ####################################################### 从第三章开始,我正式进入项目过程,启动.规划.执行.监控.收尾五大过程组的具体在之后依次 ...

  6. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  7. badboy录制,出现弹框提示脚本错误解决方法

    录制的时候经常出现如下问题: 结合网上一些资料,发现如下设置可以解决,具体原理不太清楚,但能达到效果(后期探究一下是为什么,如有知道的朋友,请赐教)

  8. 《手把手教你构建自己的 Linux 系统》学习笔记(9)

    目录 autoreconf 命令的作用是什么? aclocal automake -a autoconf 一条命令搞完三面三步 既然有其他的「编译控制软件」为何还是使用 make 来进行编译控制? M ...

  9. go 面向对象

    结构体 创建结构体变量和访问结构体字段 package main import "fmt" //创建结构体变量和访问结构体字段 type Person struct { Name ...

  10. 『后缀自动机入门 SuffixAutomaton』

    本文的图片材料多数来自\(\mathrm{hihocoder}\)中详尽的\(SAM\)介绍,文字总结为原创内容. 确定性有限状态自动机 DFA 首先我们要定义确定性有限状态自动机\(\mathrm{ ...