CSS小功能

来源:互联网 发布:超星网络课答案 编辑:程序博客网 时间:2024/06/15 02:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>练习</title>    <style type="text/css">        .underLine {            text-decoration: underline;        }        span > span {            text-decoration: underline;            font-weight: bold;            margin-left: 20px;            font-size: 13px;        }        div>span{            margin-left: 7px;            font-size: 13px;        }    </style></head><body><div style="height: 30px">    <div style="position:absolute;left: 0%;top: 0%;line-height: 30px;">        <span>大连:</span>        <img style="margin-left: 10px" src="天气.png"/>        <span>23℃</span>        <span style="color: blue"></span>        <span>43</span>        <span class="underLine">消息</span>    </div>    <span style="position: absolute;right: 0%;top: 0%;line-height: 30px;">        <span>新闻</span>        <span>hao123</span>        <span>地图</span>        <span>视频</span>        <span>贴吧</span>        <span>学术</span>        <span>登录</span>        <span>设置</span>        &nbsp;        <span style="display: inline-block;height:30px;color: white;background-color: cornflowerblue;text-align: center;padding-left: 10px;padding-right: 10px">更多产品</span>    </span></div><hr style="margin-top: 0px;background-color: #eeeeee;"/><div style="text-align: center;margin-top: 120px">    <img src="百度.png"></div><form style="text-align: center;margin-top: 20px">    <input style="line-height: 30px;width: 540px" type="text"><span style="line-height: 30px;background-color: cornflowerblue;padding: 9px;color: white">百度一下</span></form><div style="position: fixed;width: 200px;height: 200px;right: 0%;bottom: 0%;">    我是小广告<img style="margin-left: 90px" src="差.png">    <img width="100%" height="100%" src="蓝鸥.png"></div></body></html>

这里写图片描述

原创粉丝点击