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. Sublime text3的安装及python开发环境的搭建

    作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...

  2. 《果壳中的C# C# 5.0 权威指南》 - 学习笔记

    <果壳中的C# C# 5.0 权威指南> ========== ========== ==========[作者] (美) Joseph Albahari (美) Ben Albahari ...

  3. 使用vscode对threejs的本地调试

    始终坚信阅读和调试结合的方式,才是学习开源的高效方法 一.老版本调试 遥想当年的threejs(使用版本为r75)还没有CommonJS,对于我这个小白可以拿起大刀大杀四方......(咳.咳. 就是 ...

  4. NodeJs-promise和async_await语法

    Callback hell回调地域 当我们以同步的方式编写耗时的代码,那么就会阻塞JS的单线程,造成CPU一直等待IO完成才去执行后面的代码. 而CPU的执行速度是远远大于硬盘IO速度的,这样等待只会 ...

  5. mysql必知必会--用正则表达式 进行搜索

    正则表达式介绍 前两章中的过滤例子允许用匹配.比较和通配操作符寻找数据.对 于基本的过滤(或者甚至是某些不那么基本的过滤),这样就足够了.但 随着过滤条件的复杂性的增加, WHERE 子句本身的复杂性 ...

  6. C++中static关键字的用法

    运行一个完整的程序.我们可将整个存储区分为四块: (1)栈区:就比如局部变量,对应的函数参数等这些,调用完之后相应的内存会自己释放掉,很让人省心. (2)堆区:堆来堆去的.得要人动手.所以得我们自己手 ...

  7. Django单元测试中Fixtures用法

    在使用单元测试时,有时候需要测试数据库中有数据,这时我们可以使用Django的Fixtures来生成测试数据. 基础配置 在settings.py 中配置如下内容: FIXTURE_DIRS = (' ...

  8. 树莓派搭载CentOS7系统初始配置

    系统属性: 树莓派型号:3b SD:32GB 系统:CentOS-Userland-7-armv7hl-RaspberryPI-Minimal-1908-sda.raw 开机配置: 连接树莓派: 配件 ...

  9. 贪心训练均分纸牌Noip2002

    题目链接:https://www.luogu.com.cn/problem/P1031 题目描述 有N堆纸牌,编号分别为 1,2,…,N.每堆上有若干张,但纸牌总数必为N的倍数.可以在任一堆上取若干张 ...

  10. jdk1.7、jdk1.8兼容共存环境配置方案

    前提:环境变量配置 JAVA_HOME=%JAVA_HOME8% JAVA_HOME8=E:\jdk1.8.0_40 JAVA_HOME7=E:\jdk1.7.0_51 path 一.jdk是绿色免安 ...