3、css边框以及其他常用样式

一、边框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="border: 1px solid red">abc</div>

    <div style="border: 1px dotted blue">abc</div>

</body>

</html>

#style="border: 1px   //边框1像素

#solid  //实线；    dotted  //虚线；还可以设置左、右；

#颜色

二、其他样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 45px; width: 80%; border: 1px solid red">abc</div>

    <div style="height: 45px;

    width: 200px;

    border: 1px solid red;

    font-size: 20px;

    text-align: center;

    line-height: 45px;

    font-weight: bold;

    ">abc</div>

</body>

</html>

height           //高度,百分比

width        //宽度像素，百分比

text-align:ceter    //水平方向居中

line-height    //垂直方向根据标签高度居中

color        //字体颜色

font-size        //字体太小

font-weight     //字体加粗

三、float样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 20%; background-color: red; float: left">1</div>

    <div style="width: 80%; background-color: blue; float: right">2</div>

</body>

</html>

float    //让标签飘起来，块级标签也可以堆叠；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 38px;

            background-color: #dddddd;

            line-height: 38px;

        }

    </style>

</head>

<body style="margin: 0 auto">        #去掉顶部空隙

    <div class="pg-header">

        <div style="float: left;">收藏本站</div>

        <div style="float: right;">

            <a>登录</a>

            <a>注册</a>

        </div>

    </div>

    <div style="width: 300px; border: 1px solid red;">

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>    #div会逐个拼接；

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>

        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>

        <div style="clear: both"></div>

    </div>

</body>

</html>

四、display样式

行内标签：无法设置高度，宽度，padding margin

块级标签：可以设置高度，宽度，padding margin

display:none；    //让标签消失

display:inline；    //让块级标签变成行内标签

display:block；    //让行内标签变成块级标签

display:inline-block；

    //具有inline默认自己有多少占多少；

    //具有block，可以设置高度，宽度，padding margin；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="background-color: red; display: inline">abc</div>

    <span style="background-color: red; display: block">abc</span>

</body>

</html>

五、内外边距

margin //外边距

padding //内边距

3、css边框以及其他常用样式的更多相关文章

css边框以及其他常用样式
1. 边框是1像素,实体的,红色的. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
CSS文字，文本常用样式
CSS文字,文本常用样式字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
CSS边框及常用样式
一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法 board:宽度样式颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...
CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
css入门二-常用样式
css入门二-常用样式总结基本标签样式背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
CSS常用样式属性
1.CSS字体和文本相关属性属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

随机推荐

python--网络编程--socket
网络通信标准---网络协议互联网协议--osi七层协议五层协议:应用层:应用层.表示层.会话层传输层:传输层网络层:网络层数据链路层:数据链路层物理层: ...
ajax短信验证码-mvc
<script type="text/javascript"> function SendMessage() { var phoneNumberInput = docu ...
etymology-I
1)inter-.intra-.intro- 三个前缀inter-,intra-和intro-还是有差别的. inter-表between,如international那是between differ ...
Transforming Auto-encoders
http://www.cs.toronto.edu/~hinton/absps/transauto6.pdf The artificial neural networks that are used ...
Delphi里可将纯虚类实例化，还可调用非虚函数
这是与Java/C++的巨大不同.目前还没仔细想这个特征与TClass之间的联系,先记住结论再说.以后再回来修改这个帖子. unit Unit1; interface uses Windows, Me ...
php date之间的相互转换
字符串转成date $str =date("Y-m-d H:i:s",strtotime("2011-12-12 14:23:01")); echo $str; ...
【Effective C++】资源管理
资源:动态分配的内存.文件描述器.互斥锁.图形界面中的字型与笔刷.数据库连接以及网络sockets等,无论哪一种资源,重要的是,当你不再使用它时,必须将它还给系统. 条款13:以对象管理资源当我们向 ...
Mac下eclipse的快捷键
一.Command类 Command+1 快速修复 Command+d 删除当前行 Command+Option+↓ 复制当前行到下一行 Command+Option+↑ 复制当前行到上一行 Comm ...
int 转十六进制
//使用1字节就可以表示bpublic static String numToHex8(int b) { return String.format("%02x", b ...
ubuntu搭建mysql
步骤1 – 安装MySQL 在 Ubuntu 16.04 中,默认情况下,只有最新版本的 MySQL 包含在 APT 软件包存储库中.在撰写本文时,那是 MySQL 5.7 要安装它,只需更新服务器上 ...

3、css边框以及其他常用样式

3、css边框以及其他常用样式的更多相关文章

随机推荐

热门专题