<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta http-equive="refresh" content="30">
        <!--页面30秒刷新一次-->
        <title>这是第二天第一个css文档</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <style>
            *{
                margin:0;
                padding:0;
                border:0;
            }
            .p1{
                color:pink;
                margin-top:88px;
            }
            .a1{
                text-decoration:none;
            }
            .p3{
                color:red;
            }
            .p4{
                font-size:38px;
            }
            .p5{
                font-weight:bold;
            }
            .p6{
                font-weight:bold;
                font-size:30px;
                background:yellow;
                text-align:center;
            }
        </style>
        <!--三种样式：
            1.行内样式：在标签使用“style”元素来包含css，优先级最高
            2.内联样式：在头部用<style>标签包含css样式，优先级次之
            2.外链样式：使用<link href="" rel="stylesheet" type="text/css">
        -->
    </head>
    <body>
        <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background:#40b3df;"></div>
        
        <div style="font-family:verdana;padding:20px;border:10px solid #EE872A;border-radius:10px;">
            <div style="opacity:0.3;position:absolute;left:120px;width:80px;height:200px;background:#8AC007"></div>
            <h3>看这里看这里</h3>
            <div style="letter-spacing:3px">这里是控制横排字符间距的，也就是两个字间的距离</div>
            <div style="color:#40B3DF;">
                <span style="background:#B4009E;color:#ffffff;">就是这个字</span>
            </div>
            <div style="color:#000">更多</div>
        </div>

<p class="p1">这是一个段落，我用头部样式把自己变成骚气粉色</p>
        <a href="javascript:;" class="a1">我用头部样式去掉我的鞋子--下划线</a>
        <p class="p2">我是外部样式表改变的大小和加粗</p>
        <p class="p3">我是红色</p>
        <p class="p4">我是38号字体</p>
        <p class="p5">我是加粗</p>
        <p class="p6">我是加粗30号又是黄背景,我还要居中</p>
        <br />
        <p>图像插入以及左右浮动图像</p>
        <!--浮动图像-->
        <img src="http://www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:left">
        <img src="http://www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:right">
        <map>
            <area shape="circle" coords="0,0,0"
        </map>

</body>
</html>

第二天--html+css的更多相关文章

  1. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  2. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  3. javaWeb技术第二篇之CSS、事件和案例

    <!--内联式 CSS (层叠样式表) 编辑 层叠样式表(英文全称:Cascading Style Sheets) CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式 ...

  4. 第二个div+css前端项目

    先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...

  5. 第二天（CSS 选择器）

    1.常用的CSS选择器         类型选择器: 例如: p { color : red ; }         后代选择器: 例如: h2 span { font-weight : bold ; ...

  6. 第二篇、css尺寸和边框

    一.尺寸和标签图 二.尺寸单位 %:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于 ...

  7. 第二节：Css重写样式

    一丶 进入浏览器---->F12----->找到要修改的区域的Style 进行重写Css样式 二丶打开新页面 window.open("/Persitent/OtherIndex ...

  8. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  9. html学习-第二集（CSS）

    head标签里面添加style标签,可以为标签添加样式 id选择器 类选择器 标签选择器 层级选择器 组合选择器 属性选择器 <!DOCTYPE html> <html lang=& ...

随机推荐

  1. Java中private、protected、public和default的区别

    public: 具有最大的访问权限,可以访问任何一个在classpath下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. protected: 主要的作用就是用来保护子 ...

  2. GStreamer 记录

    GStreamer 是一个新的多媒体框架,大大简化了多媒体工具的开发流程,比如,这里有一个 IBM 的文档,介绍了一个 MP3 播放器. http://www.ibm.com/developerwor ...

  3. 为什么FFT时域补0后，经FFT变换就是频域进行内插？

    应该这样来理解这个问题: 补0后的DFT(FFT是DFT的快速算法),实际上公式并没变,变化的只是频域项(如:补0前FFT计算得到的是m*2*pi/M处的频域值, 而补0后得到的是n*2*pi/N处的 ...

  4. Android 千牛数据库分析

    标签(空格分隔): 千牛,逆向 问题:Android 千牛登陆后产生保存用户数据的db无法直接用sqlite3打开,需要解密. 反编译Apk后jd-gui查看源码.熟悉的sqlcrypto模块加密,阿 ...

  5. Day10-线程进程

    什么是进程? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述文本:进程是程序的一次 ...

  6. 在thinkphp中js文件添加路径

    JS文件不认识__URL__这些tp独特的链接,所以要自己重新定义url,才能使用这些路径. 在js对于的模板上定义url 然后在js文件中引用

  7. Spring Boot中的事务管理

    原文  http://blog.didispace.com/springboottransactional/ 什么是事务? 我们在开发企业应用时,对于业务人员的一个操作实际是对数据读写的多步操作的结合 ...

  8. unity小地图技术方案总结

    技术方案 一:从顶视图获取实时小地图(优点实现快容易对地图进行放大缩小操作而且地图,缺点是不好对地图做出修改,只能在顶部加个另外的相机层来遮盖) 1.创建Redertexture并改名为smallma ...

  9. centos 7.0 编译安装php 7.0.3

    php下载页面 http://cn2.php.net/downloads.php 7.0.3多地区下载页面 http://cn2.php.net/get/php-7.0.3.tar.gz/from/a ...

  10. shell条件判断与流程控制

    一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...