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() ...

随机推荐

rf 环境
googlechrome webdriver驱动下载 addrhttps://sites.google.com/a/chromium.org/chromedriver/downloads谷歌浏览器ap ...
vCPU 和 CPU 的关系
vCPU 和 pCPU 的关系不是数量,当被底层虚拟化之后,任何一个 vCPU 都是用到所有的 pCPU 核心总体的百分比,不是某一个核心这么去看的,并没有对应的关系,也不是一个很绝对的分配到具体某个 ...
Shiro入门基础
Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能. Authentication:身份认证/登录,验证用户是不是拥有相应的身份: Authorization:授权,即 ...
Python：函数基础
概念一段代码,集中到一起,起一个名字,下一次可以使用这个名字调用这个代码块,就是函数的功能作用: 方便代码的重用分解任务,简化程序逻辑使代码更加模块化函数的分类内建函数第三方函数自定义 ...
day46_Webservice学习笔记_02
一.回顾昨天所学什么是webservice? 什么是远程调用技术?答:系统和系统之间的调用,从远程系统当中获取业务数据. Webservice是web服务,他是用http传输SOAP协议 ...
C++11特性中基于范围的for循环
本文摘录柳神笔记: 除了像C语⾔的for语句 for (i = 0; i < arr.size(); i++) 这样,C++11标准还为C++添加了⼀种新的 for 循环⽅式,叫做基于范围 ...
高级T-SQL进阶系列（一）【中篇】：使用 CROSS JOIN 介绍高级T-SQL
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文连接:传送门. 当一个CROSS JOIN 表现得如同一个INNER JOIN 在上一章节我提到当你使用一个CROSS JOIN ...
类似discuz密码的生成规则
/* 生成一个串,uniqid(rand()): uniqid(prefix,more_entropy) 函数基于以微秒计的当前时间,生成一个唯一的 ID. 如果 prefix 参数为空,则返回的字符 ...
December 21st, Week 51st Saturday, 2019
May the odds be ever in your favor. 愿好运永远眷顾你. From The Hunger Games. May we all have good luck, and ...
使用 CocoaPods 遇到的问题记录
1. 在 Terminal 输入 Cocoapods 命令时,有时会一直等待,出现“Performing a deep fetch of the `master` specs repo to impr ...

CSS 常用操作

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

随机推荐

热门专题