首页 > 代码库 > 学习笔记10.31

学习笔记10.31

2024-08-18 07:47:15   220人阅读

今天进行了样式表的学习，控制大的小（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; width:500px; ">
                <input type="submit" value="百度一下" style=" height:35px; width:80px; ">
            </form>
        </div>
        <div id="d">
            <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onm ousedown="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/" onm ousedown="return ns_c({‘fm‘:‘behs‘,‘tab‘:‘tj_duty‘})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onm ousedown="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; width:500px; ">
                <input type="submit" value="百度一下" style=" height:35px; width:80px; ">
            </form>
        </div>
        <div id="d">
            <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onm ousedown="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/" onm ousedown="return ns_c({‘fm‘:‘behs‘,‘tab‘:‘tj_duty‘})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onm ousedown="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>

 

学习笔记10.31


联系
我们