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. BP神经网络拟合给定函数

    近期在准备美赛,因为比赛需要故重新安装了matlab,在里面想尝试一下神将网络工具箱.就找了一个看起来还挺赏心悦目的函数例子练练手: y=1+sin(1+pi*x/4) 针对这个函数,我们首先画出其在 ...

  2. Python面试(网编+数据库)

    第一部分 必答题 简述 OSI 7层模型及其作用?(2分) 应用层:与用户直接交互,软件.网站等 表示层:使用软件.网站可以查看的数据,图片等 会话层:保持登录状态,电脑中为cookie 传输层:选择 ...

  3. StarUML之七、StarUML的Class Diagram(类图)示例

    UML 类图中的概念 类图关系:泛化(继承).实现.聚合.组合.关联.依赖 类图的详解可在网上查询(推荐https://zhuanlan.zhihu.com/p/24576502) 它描述了在一个系统 ...

  4. JS中this的几种情况

    1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...

  5. C#上位机之—WinForm实现Socket异步通讯示例

    工作中常用到的一些知识点,总是用完就忘,第一次尝试用博客记录下来,以备后用: Socket通讯,Socket(套接字)是基于TCP/IP通讯方式的封装好的类,调用时需要添加下面的服务引用: using ...

  6. javaSE学习笔记（17）---锁

    javaSE学习笔记(17)---锁 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相关源码(本文中的源码来自JDK 8).使用场景进行举例,为读 ...

  7. 吴裕雄--天生自然 R语言数据可视化绘图（2）

    par(ask=TRUE) opar <- par(no.readonly=TRUE) # save original parameter settings library(vcd) count ...

  8. RocketMQ幂等性问题

    什么是幂等性: 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 当出现消费者对某条消息重复消费的情况时,重复消费的结果与消费一次的结果是相同的,并且多次消费并未对业务系 ...

  9. Redis 安装 (未)

    Redis 安装步骤 1. 下载地址 2.  版本选择 3.  配置主要参数 4.  关联操作

  10. requests库爬取需要登录的网站

    #!usr/bin/env python #-*- coding:utf-8 _*- """ @author:lenovo @file: 登录人人网.py @time: ...