zoukankan      html  css  js  c++  java
  • 学习笔记10.31

    今天进行了样式表的学习,控制大的小(width宽度)、(height高度)。控制背景的(background-color背景色)、(background-image背景图片)、(background-repeat背景图的平铺方式)、(background-position背景图片位置)、(background-attachment设置背景图片是否滚动)、(background-size背景图的大小)。控制字体的(font-family 字体样式)、(font-size 字体大小)、(font-style italic倾斜)、(font-weight bold加粗)、(text-decoration,underline下划线、overline上划线、line-through删除线、none没有,用来去掉超链接的下划线)、(color字体颜色)。对齐方式(text-align水平对齐方式)、(vertical-align垂直对齐方式,配合行高使用)、(line-height行高)、(text-indent缩进)。边界边框(margin外边距上右下左)、(padding,内边距,上右下左如果加了内边距,该元素会相应的变大)、(border  1px solid #60F)。列表方块(list-style none将列表前面的序号去掉)、(list-style-image可以将前面的序号变为图片)。格式与布局位置,position(fixed固定相对于浏览器边框位置固定)、(absolute绝对位置)、相对于父级元素(浏览器,绝对定位的上级)、(relative相对于自身应该出现的位置)、(top距离上边的距离)、(right距离右边的距离)、(bottom距离下边的距离)、(left距离左边的距离)、流(float left向左流,right 向右流)、(clear both清掉流)、(z-index分层值越大越靠上)。其它(display显示block和隐藏none,不占位置)、(visibility  显示visible和隐藏hidden,占位置)、(overflow超出范围 hidden隐藏)、(透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50))、(圆角border-radius:5px;)、(阴影box-shadow:0 0 5px white;)。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style>
                #a
                {
                   font-weight:bold;
                   font-size:14px;
                   margin:10px;
                   top:15px;
                   right:100px;
                   position:fixed;
                   
                }
                
                #b
                {
                    top:50px;
                    right:40%;
                    position:fixed;
                }
                #c
                {
                    top:200px;
                    left:29%;
                    position:fixed;
                }
                #d
                {
                    bottom:110px;
                    left:37%;
                    position:fixed;
                }
                #e
                {
                    left:33%;
                    bottom:90px;
                    position:fixed;
                }
                #f
                {
                    left:40%;
                    bottom:70px;
                    position:fixed;
                }
            </style>
        </head>
        
        <body>
            <div id="a">
                 <a href="http://www.nuomi.com/?cid=002540" name="tj_trnuomi" id="tj_trnuomi">糯米</a>&nbsp;
                 <a href="http://news.baidu.com/" name="tj_trnews" id="tj_trnews">新闻</a>&nbsp;
                 <a href="http://www.hao123.com/" name="tj_trhao123" id="tj_trhao123">hao123</a>&nbsp;
                 <a href="http://map.baidu.com/" name="tj_trmap" id="tj_trmap">地图</a>&nbsp;
                 <a href="http://v.baidu.com/" name="tj_trvideo" id="tj_trvideo">视频</a>&nbsp;
                 <a href="http://tieba.baidu.com/" name="tj_trtieba" id="tj_trtieba">贴吧</a>&nbsp;
                 <a href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F" name="tj_login" id="tj_login2" onclick="return false;">登录</a>&nbsp;
                 <a href="http://www.baidu.com/gaoji/preferences.html" name="tj_settingicon" id="tj_settingicon2">设置</a>
             </div>
                 <form name="更多" action="威海学院个人资料填写.html" method="get" style=" font-weight:bold; font-size:14px; margin:10px; top:12px; right:1px; position:fixed;">
                     更多<select name="更多">
                         <option value="">知道</option>
                         <option value="">音乐</option>
                         <option value="">文库</option>
                     </select>
                 </form>
    
            <div id="b">
                <img src="百度素材/bd_logo1.png" width="270" height="129">
            </div>
            <div id="c">
                <form action="百度素材/反馈结果这是个假百度.html" method="get">
                    <input type="text" name="输入框" value="" style=" height:30px; 500px; ">
                    <input type="submit" value="百度一下" style=" height:35px; 80px; ">
                </form>
            </div>
            <div id="d">
                <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onmousedown="return ns_c({'fm':'behs','tab':'favorites','pos':0})" target="_blank">把百度设为主页</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about'})" href="http://home.baidu.com/">关于百度</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about_en'})" href="http://ir.baidu.com/">About Baidu</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_tuiguang'})" href="http://e.baidu.com/?refer=888">百度推广</a>
                
            </div>
            <div id="e">
                ©2016 Baidu <a href="http://www.baidu.com/duty/" onmousedown="return ns_c({'fm':'behs','tab':'tj_duty'})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onmousedown="return ns_c({'fm':'behs','tab':'tj_homefb'})">意见反馈</a> 京ICP证030173号
            </div>
            <div id="f">
                <a id="jgwab" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
            </div>
        </body>
    </html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style>
                #a
                {
                   font-weight:bold;
                   font-size:14px;
                   margin:10px;
                   top:15px;
                   right:100px;
                   position:fixed;
                   
                }
                
                #b
                {
                    top:50px;
                    right:40%;
                    position:fixed;
                }
                #c
                {
                    top:200px;
                    left:29%;
                    position:fixed;
                }
                #d
                {
                    bottom:110px;
                    left:37%;
                    position:fixed;
                }
                #e
                {
                    left:33%;
                    bottom:90px;
                    position:fixed;
                }
                #f
                {
                    left:40%;
                    bottom:70px;
                    position:fixed;
                }
            </style>
        </head>
        
        <body>
            <div id="a">
                 <a href="http://www.nuomi.com/?cid=002540" name="tj_trnuomi" id="tj_trnuomi">糯米</a>&nbsp;
                 <a href="http://news.baidu.com/" name="tj_trnews" id="tj_trnews">新闻</a>&nbsp;
                 <a href="http://www.hao123.com/" name="tj_trhao123" id="tj_trhao123">hao123</a>&nbsp;
                 <a href="http://map.baidu.com/" name="tj_trmap" id="tj_trmap">地图</a>&nbsp;
                 <a href="http://v.baidu.com/" name="tj_trvideo" id="tj_trvideo">视频</a>&nbsp;
                 <a href="http://tieba.baidu.com/" name="tj_trtieba" id="tj_trtieba">贴吧</a>&nbsp;
                 <a href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F" name="tj_login" id="tj_login2" onclick="return false;">登录</a>&nbsp;
                 <a href="http://www.baidu.com/gaoji/preferences.html" name="tj_settingicon" id="tj_settingicon2">设置</a>
             </div>
                 <form name="更多" action="威海学院个人资料填写.html" method="get" style=" font-weight:bold; font-size:14px; margin:10px; top:12px; right:1px; position:fixed;">
                     更多<select name="更多">
                         <option value="">知道</option>
                         <option value="">音乐</option>
                         <option value="">文库</option>
                     </select>
                 </form>
    
            <div id="b">
                <img src="百度素材/bd_logo1.png" width="270" height="129">
            </div>
            <div id="c">
                <form action="百度素材/反馈结果这是个假百度.html" method="get">
                    <input type="text" name="输入框" value="" style=" height:30px; 500px; ">
                    <input type="submit" value="百度一下" style=" height:35px; 80px; ">
                </form>
            </div>
            <div id="d">
                <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onmousedown="return ns_c({'fm':'behs','tab':'favorites','pos':0})" target="_blank">把百度设为主页</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about'})" href="http://home.baidu.com/">关于百度</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about_en'})" href="http://ir.baidu.com/">About Baidu</a>
                <a onmousedown="return ns_c({'fm':'behs','tab':'tj_tuiguang'})" href="http://e.baidu.com/?refer=888">百度推广</a>
                
            </div>
            <div id="e">
                ©2016 Baidu <a href="http://www.baidu.com/duty/" onmousedown="return ns_c({'fm':'behs','tab':'tj_duty'})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onmousedown="return ns_c({'fm':'behs','tab':'tj_homefb'})">意见反馈</a> 京ICP证030173号
            </div>
            <div id="f">
                <a id="jgwab" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
            </div>
        </body>
    </html>
  • 相关阅读:
    Get-CrmSetting返回Unable to connect to the remote server的解决办法
    Dynamics 365中的常用Associate和Disassociate消息汇总
    Dynamics 365 Customer Engagement V9 活动源功能报错的解决方法
    Dynamics Customer Engagement V9版本配置面向Internet的部署时候下一步按钮不可点击的解决办法
    Dynamics 365检查工作流、SDK插件步骤是否选中运行成功后自动删除系统作业记录
    注意,更改团队所属业务部门用Update消息无效!
    Dynamics 365的审核日志分区删除超时报错怎么办?
    Dynamics 365使用Execute Multiple Request删除系统作业实体记录
    Dynamics 365的系统作业实体记录增长太快怎么回事?
    Dynamics CRM日期字段查询使用时分秒的方法
  • 原文地址:https://www.cnblogs.com/l123789/p/6016909.html
Copyright © 2011-2022 走看看