CSS 常用操作

1、对齐

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>对齐</title>

    <style>

        * {

            margin: 0px;

        }

        .div {

            width: 70%;

            height: 1000px;

            background-color: red;

            margin-left: auto;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <div class="div">

    </div>

</body>

</html>

2、分类

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>分类</title>

    <style>

        .p1 {

            line-height: normal;

            max-width: 250px;

        }

        .p2 {

            width: 400px;

            line-height: 200%;

        }

        .p3 {

            width: 400px;

            line-height: 50%;

        }

    </style>

</head>

<body>

    <p class="p1">

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

    </p>

    <p class="p2">

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

    </p>

    <p class="p3">

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

        this is my web page  this is my web page  this is my web page

    </p>

</body>

</html>

...

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>分类</title>

    <style>

        li {

            display: inline;

            visibility: hidden;

        }

    </style>

</head>

<body>

    <ul>

        <li>hello</li>

        <li>hello</li>

        <li>hello</li>

        <li>hello</li>

    </ul>

</body>

</html>

3、垂直导航栏

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>垂直导航栏</title>

    <style>

        ul {

            list-style-type: none;

            margin: 0px;

            padding: 0px;

        }

        a:link, a:visited {

            text-decoration: none;

            display: block;

            background-color: burlywood;

            color: aliceblue;

            width: 50px;

            text-align: center;

        }

        a:active, a:hover {

            background-color: crimson;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">导航1</a></li>

        <li><a href="#">导航2</a></li>

        <li><a href="#">导航3</a></li>

        <li><a href="#">导航4</a></li>

    </ul>

</body>

</html>

4、水平导航栏

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>水平导航栏</title>

    <style>

        ul {

            list-style-type: none;

            margin: 0px;

            padding: 0px;

            background-color: burlywood;

            width: 250px;

            text-align: center;

        }

        a:link, a:visited {

            font-weight: bold;

            text-decoration: none;

            background-color: burlywood;

            color: aliceblue;

            width: 50px;

            text-align: center;

        }

        a:active, a:hover {

            background-color: crimson;

        }

        li {

            display: inline;

            padding: 3px;

            padding-left: 5px;

            padding-right: 5px;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">导航1</a></li>

        <li><a href="#">导航2</a></li>

        <li><a href="#">导航3</a></li>

        <li><a href="#">导航4</a></li>

    </ul>

</body>

</html>

5、图片

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>CSS图片</title>

    <style>

        body {

            margin: 10px auto;

            width: 70%;

            height: auto;

            /*background-color: burlywood;*/

        }

        .image {

            border: 1px solid darkgray;

            width: auto;

            height: auto;

            float: left;

            text-align: center;

            margin: 5px;

        }

        img {

            margin: 5px;

            width: 300px;

            height: 180px;

            opacity: 0.8; /*透明度*/

        }

        .text {

            font-size: 15px;

            margin-bottom: 5px;

        }

        a:hover {

            background-color: burlywood;

        }

    </style>

</head>

<body>

    <div class="image">

        <a href="#" target="_self">

            <img src="Scripts/img/bg.jpg" alt="美女" />

        </a>

        <div class="text">漂亮的妹子</div>

    </div>

    <div class="image">

        <a href="#" target="_self">

            <img src="Scripts/img/bg.jpg" alt="美女" />

        </a>

        <div class="text">漂亮的妹子</div>

    </div>

    <div class="image">

        <a href="#" target="_self">

            <img src="Scripts/img/bg.jpg" alt="美女" />

        </a>

        <div class="text">漂亮的妹子</div>

    </div>

</body>

</html>

CSS 常用操作的更多相关文章

web前端学习（三）css学习笔记部分（3）-- css常用操作
5. CSS常用操作 5.1 对齐使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...
CSS常用操作-图片
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
CSS常用操作-对齐
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
CSS常用操作-导航栏
1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
HTML5学习笔记（十）：CSS常用操作
对齐在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...
css常用操作
对齐操作 1.使用margin属性进行水平对齐 margin-left:auto; margin-right:auto; 2.使用position属性进行左右对齐 3.使用fl ...
CSS常用操作-分类
CSS常用选择器
关于CSS常用选择器: 1.ID选择器关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...
js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

随机推荐

JQ - 绑定（on）/解绑（off）事件（浅显的见解）
on 绑定事件: $("selector").on("click",事件执行函数名); //为 selector 添加点击事件 $("selecto ...
python实现直方图均衡化，理想高通滤波与高斯低通滤波
写在前面 HIT大三上学期视听觉信号处理课程中视觉部分的实验二,经过和学长们实验的对比发现每一级实验要求都不一样,因此这里标明了是2019年秋季学期的视觉实验二. 由于时间紧张,代码没有进行任何优化, ...
python两个_多个字典合并相加
这只是符合比较正常的需求和场景. #一.适用合并两个字典(key不能相同否则会被覆盖),简单,好用. A = {'a': 11, 'b': 22} B = {'c': 48, 'd': 13} #up ...
Wireshark 查看指定进程的网络包
Wireshark 查看指定进程的网络包打开任务管理器,右键筛选列,选中PID(进程标识符): 找到该进程对应的PID,如1200: 在cmd中执行netstat -ano|findstr 1200 ...
FastDFS文件上传和下载流程
文件上传流程客户端上传文件后存储服务器将文件 ID 返回给客户端,此文件 ID 用于以后访问该文件的索引信息.文件索引信息包括:组名,虚拟磁盘路径,数据两级目录,文件名.  组名:文件上传后所在的 ...
[原]NTP时钟同步服务设置
服务器列表 192.168.0.2 ntp服务端 192.168.0.3 ntp客户端 192.168.0.4 ntp客户端 192.168.0.5 ntp客户端注:以下操作均以root操作一.N ...
[原]Java工程打包注意事项
注意事项(持续增加...): 如果Java工程中用到了注解,在用eclipse打jar包时需要注意一下,勾上“Add directory entries”,否则注解的类会注册不上
phpsduty安装SSL证书，apache不能启动，解决方案
最近给客户开发微信小程序,因为本人也不太懂服务器的安装,(大神勿喷),顾个人一直使用的集成环境,原来一直是客户提供主机什么的,都是我们和客户说一下需要什么环境啊,配置啊,之类的,这次首次自己动手. 废 ...
使用IDEA导入一个Maven风格的SSM项目
转自: 方法一: (我用的这种,导入的方法 File->New->Project from existing sources)(同理,important也是一样的) https://how ...
Dart语言学习(十) Dart流程控制语句
一.条件语句:if.if...elseif.if...elseif...else int score = 95; if (score >=90) { print('优秀'); } else if ...

CSS 常用操作

CSS 常用操作的更多相关文章

随机推荐

热门专题