CSS-学习笔记二

1. table标签中的标题

caption {
    caption-side: top;
}

2.table标签中边框重合

table {
    width: 300px;
    height: 200px;
    border-collapse: collapse; /*边框可以重合*/
}

3. table表中的项居中

th, td {
    border: solid 2px red;
    text-align: center;
}

4. 列表头和行表头

    <!--默认列表头 scope="col"-->
    <table >
        <caption >学生信息表</caption>
        <tr><th>姓名</th><th>学号</th><th>性别</th></tr>
        <tr><td>张三</td><td>001</td><td>男</td></tr>
        <tr><td>李四</td><td>002</td><td>男</td></tr>
        <tr><td>王五</td><td>003</td><td>女</td></tr>
        <tr><td>赵六</td><td>004</td><td>女</td></tr>
    </table>

    <!--横表头-->
    <table >
        <caption >学生信息表</caption>
        <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
        <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
        <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
    </table>

5. 按钮和文本框的边框,不显示或者只显示下划线

.btn {
    border-width: 0px;
}

.txt {
    border-width: 0px;
    border-bottom: solid 2px black;
}

6. 去掉超链接的下划线

a {
    text-decoration: none;
}

7. 设定鼠标的显示形状

p {
    cursor: pointer;
}

8. 无序列表,更改无序编号样式

ul {
    list-style-type: none;
}

9. 块级元素和行内元素

内联元素,行内元素:1. width和height不起作用 2.不会占满一行

内联元素包含:span input a label img textarea select等    行内元素用来做内容

块级元素:1. 设置width,height 2. 块级元素里面的内容,默认显示在块的左上角 3. 块级元素单独占满一行

块级元素包含:div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form等    块级元素用来做布局

<span>1</span><span>2</span>
span {
    /*width :100px;  不起作用*/
    /*height :100px;不起作用*/
    /*border :solid 1px red;*/
    /*display :block 行内元素转化为块级元素*/
    /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}

对于块级元素的两个重要CSS属性:float和clear

<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
.c1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    /*display :inline   块级元素转化为行内元素*/
    float: left; /*浮动,靠左对齐*/
}

.c2 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: left; /*因为受到前面块级元素float的影响,必须先清空下前面的格式*/
    float: right;
}

.c3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float: right;
}

10. 盒子模型 padding margin

<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
#d1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: both;
    /*padding :10px;  上下左右都撑开10px*/
    /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
    /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
    /*padding :10px 15px 20px 25px 顺时针,上10,右15,下20,左25*/
    padding-top: 20px;
    padding-left: 15px;
}

#d2, #d3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float :left ;
}
#d3 {
    /*margin :20px;  这个用法和padding一样*/
    margin-left :20px;
}

11.所有的元素都顶住浏览器的边框

*{
    padding :0px;
    margin :0px;
}

12. 在google浏览器中调试,右键-Inspect

    <div id="d4">
        <ul >
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
        </ul>
    </div>
#d4{
    width: 200px;
    height: 100px;
    border: solid 1px red;
    clear :both ;
    margin :0px auto; /*代表上下是0,左右自动平分,这样就居中了*/
}
#d4 ul{
    width: 120px;
    height: 60px;
    margin :0px auto ; /*默认是div的宽度,先丈量下大小,修改高度和宽度*/
}

13. padding和Magin对行内元素一样有作用

    <div>
        <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
    </div>
#d5,#d6{
        border: solid 1px red;
        padding :20px;
        margin :50px;
}

看代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="CSS/demo.css" rel="stylesheet" />
</head>
<body>

    <!--默认列表头 scope="col"-->
    <table >
        <caption >学生信息表</caption>
        <tr><th>姓名</th><th>学号</th><th>性别</th></tr>
        <tr><td>张三</td><td>001</td><td>男</td></tr>
        <tr><td>李四</td><td>002</td><td>男</td></tr>
        <tr><td>王五</td><td>003</td><td>女</td></tr>
        <tr><td>赵六</td><td>004</td><td>女</td></tr>
    </table>

    <!--横表头-->
    <table >
        <caption >学生信息表</caption>
        <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
        <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
        <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
    </table>

    <!--按钮,文本框的边框-->
    <input type="button" value="我是一个按钮" class="btn"/>
    <input type="text" class="txt"/>

    <!--去掉超链接的下划线-->
    <a href="http://www.baidu.com" target="_blank">百度</a>

    <!--设定鼠标的形状-->
    <p>鼠标形状</p>

    <ul>
        <li>1111</li>
        <li>3333</li>
        <li>5555</li>
    </ul>

    <!--内联元素,行内元素:1. width和height不起作用 2.不会占满一行
        内联元素包含:span input a label img textarea select   行内元素用来做内容-->
    <span>1</span><span>2</span>
    <br/>
    <br />
    <!--块级元素:1. 设置width,height   2. 块级元素里面的内容,默认显示在块的左上角  3. 块级元素单独占满一行
    有哪些块级元素:div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form    块级元素用来做布局-->
    <div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
    <br />
    <br />
    <!--盒子模型-->
    <div id="d1">盒子模型 内间距</div>
    <div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>

    <!--在google浏览器中调试-->
    <div id="d4">
        <ul >
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
            <li>盒子模型调试</li>
        </ul>
    </div>

    <!--padding和Magin对行内元素一样有作用-->
    <div>
        <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
    </div>
</body>
</html>
body {
    font-size: 20px;
    font-family: "微软雅黑";
}

caption {
    caption-side: top;
}

table {
    width: 300px;
    height: 200px;
    border-collapse: collapse; /*边框可以重合*/
}

th, td {
    border: solid 2px red;
    text-align: center;
}

.btn {
    border-width: 0px;
}

.txt {
    border-width: 0px;
    border-bottom: solid 2px black;
}

a {
    text-decoration: none;
}

p {
    cursor: pointer;
}

ul {
    list-style-type: none;
}

span {
    /*width :100px;  不起作用*/
    /*height :100px;不起作用*/
    /*border :solid 1px red;*/
    /*display :block 行内元素转化为块级元素*/
    /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}

.c1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    /*display :inline   块级元素转化为行内元素*/
    float: left; /*浮动,靠左对齐*/
}

.c2 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: left; /*因为受到前面块级元素float的影响,必须先清空下前面的格式*/
    float: right;
}

.c3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float: right;
}

#d1 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    clear: both;
    /*padding :10px;  上下左右都撑开10px*/
    /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
    /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
    /*padding :10px 15px 20px 25px 顺时针,上10,右15,下20,左25*/
    padding-top: 20px;
    padding-left: 15px;
}

#d2, #d3 {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    float :left ;
}
#d3 {
    /*margin :20px;  这个用法和padding一样*/
    margin-left :20px;
}

/*所有的元素都顶住浏览器的边框*/
*{
    padding :0px;
    margin :0px;
}

#d4{
    width: 200px;
    height: 100px;
    border: solid 1px red;
    clear :both ;
    margin :0px auto; /*代表上下是0,左右自动平分,这样就居中了*/
}
#d4 ul{
    width: 120px;
    height: 60px;
    margin :0px auto ; /*默认是div的宽度,先丈量下大小,修改高度和宽度*/
}
#d5,#d6{
        border: solid 1px red;
        padding :20px;
        margin :50px;
}
时间: 2024-10-11 22:03:50

CSS-学习笔记二的相关文章

css学习笔记二

2015年7月12日一.absolute1.注释符有去空格效果2.absolute有跟随性,最佳定位效果3.图片居中效果--在父元素里设置absolute,test-align:center 图片前用一个 空字符串然后图片<img src=""/>4.absolute不占空间,不影响页面布局5.absolute时z-index不起作用6.top ,bottom,left,right有拉伸作用IE7+可以替代width/height,内部元素可以自动拉伸.7.比较 正常情况下

Html+css学习笔记二 标题

学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1>大</h1> <h2>大</h2> <h3>大</h3> <h4>大</h4> <h5>大</h5> <h6>大</h6> <h7>大</h7>

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201 qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等) 本学章节笔记主要详解Item元素(上半场主要涉及anchors锚),因为所有可视化的界面元素都继承于Item,熟悉Item后,不同的继承子类,有其定制的属性(从几个到几十个不等). <Qt实用技巧:在Qt Gui程

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac