HTML写静态页面
时间:2019-03-19
本文章向大家介绍HTML写静态页面,主要包括HTML写静态页面使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一.HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <div id="page"> <div id="page_head"> <div id="logo" align=center><img src="logo.png" /></div> </div> <div id="leader"> <ul style="padding:0 0;"> <li id="mainmenu"> <a id="link" >网站首页</a> </li> <li id="mainmenu"> <a id="link" >学院概况</a> </li> <li id="mainmenu"> <a id="link" >本科生教育</a> </li> <li id="mainmenu"> <a id="link" >研究生教育</a> </li> <li id="mainmenu"> <a id="link">师资队伍</a> </li> <li id="mainmenu"> <a id="link">科学研究</a> </li> <li id="mainmenu"> <a id="link">学生工作</a> </li> <li id="mainmenu"> <a id="link">招生工作</a> </li> <li id="mainmenu"> <a id="link">实验中心</a> <li id="mainmenu"> <a id="link">党建之窗</a> </ul> </div> <div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div> <div id="page_body"> <div style="height:30%;blackground-color:grey"> <div id="leftli"> <div id="topli"> <div id="topli-leftpart"><b>图片新闻</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <div id="downimg"> <img src="abc.jpg" width="300" height="180"> </div> <div id="leftfloat"> <ul id="forul"> <li> <a>计算机科学学院举办2019年寒假留...[02-01]</a> </li> <li> <a>学院召开党委中心组学习会暨党风廉...[03-18]</a> </li> <li> <a>学院召开教职工大会学习传达中层干...[03-15]</a> </li> <li> <a>计科院工会组织学院女教职工庆祝第...[03-12]</a> </li> <li> <a>学术讲座——人工智能改变我们的未...[03-05]</a> </li> <li> <a>计算机科学学院各年级辅导员集中走...[01-21]</a> </li> </ul> </div> </div> <div id="rightli"> <div id="topli"> <div id="topli-leftpart"><b>学术交流</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <ul type="square"> <li> <a>人工智能改变我们的未来生活</a> </li> <li> <a>计算时代的虚假信息传播</a> </li> <li> <a>人工智能+:视界充满AI</a> </li> <li> <a>零行列式策略及其网络演化动力学</a> </li> <li> <a>视频遇上云服务</a> </li> <li> <a>计科院关于举行2018年校庆论文报告会的...</a> </li> </ul> </div> </div> <div style="height:35%;blackground-color:grey"> <div id="leftli"> <div id="topli"> <div id="topli-leftpart"><b>新闻速递</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <div style="padding-top:10px"> <a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a> </div> <div> <p id="grey" style="font-size:12px;">    在中华民族传统节日——春节即将到来之际,为让学院留校学生感受家的温暖,向他们传达学院的慰问和祝福。2019年2月1日上午9时30分,计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p> </div> <ul> <li> <a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a> </li> <li> <a>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作03/15</a> </li> <li> <a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a> </li> <li> <a>学术讲座——人工智能改变我们的未来生活03/05</a> </li> <li> <a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a> </li> <li> <a>学院召开2018年度领导班子民主生活会01/14</a> </li> </ul> </div> <div id="rightli"> <div id="topli"> <div id="topli-leftpart"><b>党建动态</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <ul> <li> <a>学院召开党委中心组学习会暨党风廉政建...</a> </li> <li> <a>学院召开教职工大会学习传达中层干部大...</a> </li> <li> <a>学院召开2018年领导班子民主生活会</a> </li> <li> <a>刘翔同志任计算机科学学院党委副书记、...</a> </li> <li> <a>学院党委组织师生收看庆祝改革开放40周...</a> </li> <li> <a>【审核评估】学院召开本科教学工作审核...</a> </li> <li> <a>【聚焦评估】学院召开本科教学工作审核...</a> </li> <li> <a>学院党委开展迎校庆主题党日活动</a> </li> </ul> </div> </div> <div style="height:35%;blackground-color:grey"> <div id="leftli"> <div id="topli"> <div id="topli-leftpart"><b>通知公告</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <ul> <li> <a>自组团出访前公示信息表(彭博)</a> </li> <li> <a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a> </li> <li> <a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a> </li> <li> <a>2018年秋季学期期末考试情况总结</a> </li> <li> <a>计算机科学学院2018年度教职工考核优秀名单公示</a> </li> <li> <a>国际学术会议(ICCIS2019)征稿通知</a> </li> <li> <a>计算机科学学院领导班子2018年度民主生活会征求意见</a> </li> <li> <a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a> </li> </ul> </div> <div id="rightli"> <div id="topli"> <div id="topli-leftpart"><b>专题列表</b></div> <div id="topli-rightpart"><img src="more.png" ></div> </div> <ul> <li> <a>中美联合高性能和大数据计算实验室</a> </li> <li> <a>石油工程计算机模拟技术重点实验室</a> </li> <li> <a>思科网络技术学院教师培训中心</a> </li> </ul> </div> </div> </div> <div id="pag_foot" align=center> <b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b> </div> </div> </body> </html>
二、CSS代码
#page{
margin:0px;padding:0px
}
#page_head{
background-color:white;
height:113px;width:100%;
margin:auto;
}
#page_body{
height:900px;width:975px;
margin:auto;margin-top:10px;
}
#pag_foot{
background-color:#224b77;
height:60px;
margin:auto;line-height:60px;
text-align:center;font-size:13px;color:#fff;
}
#logo{
}
#leader{
background-color:#0b6cb8;
height:50px;width:975px;
margin:auto;
}
#img_welcome{
margin:auto;text-align:center;padding-top:0px;
}
#link{
padding-left:28px;
padding-top:0px;
font-size:16px;color:#fff;
}
#mainmenu{
list-style-type:none;
float:left;
height:50px;margin: 0px;
text-align:center;
line-height:30px;
}
#leftli{
width:64%;float:left;height:100%;
background-color:white;
}
#rightli{
width:34%;float:right;height:100%;
background-color:white;
}
#topli{
height:35px;
background-color:#dddddd;
}
#topli-leftpart{
float:left;line-height:35px;
width:80px;height:100%;
background-color:#0b6cb8;
text-align:center;color:#fff;
}
#topli-rightpart{
float:right;line-height:30px;
width:40px;height:100%;
}
#downimg{
float:left;
width:50%;
padding-top:10px
}
#leftfloat{
float:left;
}
#grey{
color:grey;
}
#blue{
color:blue;
}
ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}
三.效果如下
四、网盘连接
链接: https://pan.baidu.com/s/1got-kqJkmgyob7ytKs4RlQ
提取码: mg8g
- 我的第五个网页制作:pre、html转义、abbr标签的使用
- UVALive 3882 - And Then There Was One【约瑟夫问题】
- 超级账本项目:链码示例
- 我的第六个网页制作:table标签
- POJ 1163 The Triangle【dp+杨辉三角加强版(递归)】
- UVA 11039-Building designing【贪心+绝对值排序】 UVA11039-Building designing
- UVA 11636-Hello World!(水题,猜结论) UVA11636-Hello World!
- 百度某SDK设计缺陷导致手机敏感信息泄露(IMEI号和地理位置信息等)
- HDU 1004 Let the Balloon Rise【STL<map>】
- UVA 10881 - Piotr's Ants【模拟+思维】
- DFS中的奇偶剪枝学习笔记
- POJ 3154 Graveyard【多解,数论,贪心】
- HDU 1010 Tempter of the Bone【DFS经典题+奇偶剪枝详解】
- Ethereum - 以太坊项目
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Yii2框架自定义类统一处理url操作示例
- tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
- PHP htmlspecialchars_decode()函数用法讲解
- ThinkPHP中获取指定日期后工作日的具体日期方法
- php curl操作API接口类完整示例
- PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
- Python叠加矩形框图层2种方法及效果
- PHP常量define和const的区别详解
- 解决运行出现'dict' object has no attribute 'has_key'问题
- tensorflow之读取jpg图像长和宽实例
- Python数据可视化实现多种图例代码详解
- Python使用tkinter实现摇骰子小游戏功能的代码
- pandas to_excel 添加颜色操作
- Python自带的IDE在哪里
- php+Ajax无刷新验证用户名操作实例详解