学习日志18.7.23
学习内容
今天主要复习上周末的作业,并自学了CSS边框等内容
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:PingFangSC-Regular, Verdana, Arial, '΢ÈíÑźÚ','ËÎÌå';
font-size:14px;
}
strong
{
font-family:'΢ÈíÑźÚ';
font-size:18px;
color:#3f3f3f;
font-weight:800;
}
div#maincontent h2
{
font-size: 18px;
color:#3f3f3f;
}
body#homefirst div#maincontent, div#maincontent h1, div#maincontent h2, div#sidebar div#ad h2
{
font-family:'΢ÈíÑźÚ';
}
pre, pre code, div#maincontent input, div#maincontent select, div#maincontent textarea
{
font-family:Consolas, "Courier New", Courier, monospace;
}
h2, h3, h4, h5, h6, em
{
font-weight: bold;
}
p.note span, p.important span, p.tip span, p.inherited, p.inherited span, p.gototop, .html5_new_note span
{
font-weight: bold;
}
p.tip span {
color:#ff9955;
}
p.tip2 {
background: #BBEDB8 url(/ui2017/tip.png) top left no-repeat;
display:block;
padding:15px 15px 15px 50px;
color:#000;
border-radius:5px;
background-position:15px 15px;
}
body#homesecond div#navsecond li
{
font-weight:bold;
}
div#sidebar div#ad h2, body#homefirst div#maincontent h3
{
font-size: 14px;
}
div#maincontent h3
{
font-size: 16px;
}
div#maincontent h4
{
font-size: 14px;
}
div#maincontent button, div#maincontent input, div#maincontent select, div#maincontent textarea
{
font-size:12px;
}
body#homefirst div#maincontent div#w3 h2
{
font-size:20px;
}
em
{
font-style:normal;
}
pre code
{
color:#0000dd;
}
div#maincontent button
{
margin-top:15px;
}
body
{
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: #fdfcf8;
}
div#wrapper
{
margin: 0 auto;
padding: 0;
border: 0;
width: 1239px;
text-align: left;
background: transparent url(/ui2017/wrapper.png) top left repeat-y;
}
div#navsecond
{
float: left;
margin: 0 0 0 6px;
padding: 0;
border: 0;
width: 180px;
background : transparent;
}
html>body div#navsecond
{
margin-left: 12px;
}
div#maincontent
{
float: left;
margin: 0;
padding: 30px 0 0 0;
border: 0;
width: 850px;
background: transparent;
}
div#maincontent div{
width: 810px;
margin: 0 0 0 25px;
padding: 30px 0 30px 0;
border:0;
border-bottom: 1px solid #aaa;
}
div#sidebar
{
float: left;
margin: 0;
padding: 0;
border: 0;
width: 180px;
background: transparent;
}
div#footer
{
clear: both;
margin: 0;
padding-top: 16px;
margin-left: 12px;
width: 1210px;
line-height:24px;
background: #f0f0f0;
border-top: 0px solid #fff;
background: #fdfcf8 url(/ui2017/footer.png) top left repeat-x;
font-family:PingFangSC-Regular, '΢ÈíÑźÚ', Verdana, Arial, 'ËÎÌå';
}
div#footer #p1
{
font-size:12px;
color:#777777;
text-align:center;
background: transparent url(/ui2017/alert.png) no-repeat;
background-position:235px 2px;
}
div#footer #p2
{
margin: 30px 0 30px 0;
font-size:14px;
text-align:center;
color:#777777;
}
div#footer #p1, div#footer #p2, div#footer #p2 a {
max-height: 999999px;
}
div#header, div#header_index
{
margin: 0 0 0 12px;
padding: 0;
border: 0;
width: 1210px;
height: 100px;
background-color:#fdfcf8;
}
div#header a, div#header_index a, div#header_index h1
{
text-indent: -9999px;
margin: 0;
padding: 0;
border: 0;
overflow:hidden;
float:left;
}
div#header a:link, div#header a:visited
{
display: block;
width: 372px;
height: 90px;
background : transparent url(bg.png) 0 -150px no-repeat;
margin: 0;
padding: 0;
border: 0;
}
div#header a:hover
{
background: transparent url(bg.png) 0 -250px no-repeat;
}
div#header div#ad_head
{
float:right;
width:728px;
height:90px;
background-color:#efefef;
margin-top:5px;
}
div#header_index a:link, div#header_index a:visited, div#header_index h1
{
display: block;
width: 500px;
height: 100px;
background : transparent url(/ui2017/bg.png) 0 -150px no-repeat;
margin: 0;
padding: 0;
border: 0;
}
div#header_index h1
{
display: block;
}
div#header_index a:hover
{
background: transparent url(/ui2017/bg.png) 0 -250px no-repeat;
}
div#navfirst
{
height: 48px;
width: 1210px;
margin: 0 0 0 12px;
padding: 0;
border: 0;
background: #E8E7E3;
}
div#navfirst ul#menu
{
height: 48px;
width: 1210px;
background: transparent url(/ui2017/bg.png) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
div#navfirst ul#menu li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
ul#menu li,ul#menu a
{
display: block;
height: 48px;
border-bottom:0;
}
div#navfirst ul#menu li a
{
text-indent: -9999px;
overflow:hidden;
text-decoration: none;
}
</style>
</head>
<body id="homesecond" class="html">
<div id="wrapper">
<!--头部-->
<div id="header">
<a href="/index.html" title="w3school 在线教程" style="float:left;">w3school 在线教程</a>
<div id="h-adv">
<img src="http://temp.im/728x90"/>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML 系列教程">HTML 系列教程</a></li>
<li id="b"><a href="/b.asp" title="浏览器脚本教程">浏览器脚本</a></li>
<li id="s"><a href="/s.asp" title="服务器脚本教程">服务器脚本</a></li>
<li id="d"><a href="/d.asp" title="ASP.NET 教程">ASP.NET 教程</a></li>
<li id="x"><a href="/x.asp" title="XML 系列教程">XML 系列教程</a></li>
<li id="ws"><a href="/ws.asp" title="Web Services 系列教程">Web Services 系列教程</a></li>
<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>
</ul>
</div>
</div>
</div>
<!--中部-->
<div id="navsecond">
<div id="course">
<ul>
<li><a href="/html/index.asp" title="HTML 教程">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML 教程">XHTML</a></li>
<li><a href="/html5/index.asp" title="HTML 5 教程">HTML 5</a></li>
<li><a href="/css/index.asp" title="CSS 教程">CSS</a></li>
<li><a href="/css3/index.asp" title="CSS3 教程">CSS3</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP 教程">TCP/IP</a></li>
</ul>
</div>
</div>
<div id="maincontent">
<div id="w3school">
<h1>HTML 系列教程</h1>
<p><strong>从左侧的菜单选择你需要的教程!</strong></p>
</div>
<div>
<h2>HTML</h2>
<p>HTML 指超文本标签语言。</p>
<p>HTML 是通向 WEB 技术世界的钥匙。</p>
<p>在 W3School 的 HTML 教程中,您将学习如何使用 HTML 来创建站点。</p>
<p>HTML 非常容易学习!你会喜欢它的!<a href="/html/index.asp" title="HTML 教程">现在开始学习 HTML</a> !</p>
</div>
<div>
<h2>XHTML</h2>
<p>XHTML 是更严谨更纯净的 HTML 版本。</p>
<p>在 W3School 的 XHTML 教程中,您将学习 HTML 与 XHTML 之间的差异,以及 XHTML 的优势所在。</p>
<p>我们还将会为您展示将站点升级至 XHTML 的方法,以帮助您快速部署 XHTML 技术。</p>
<p>XHTML 已经成为优秀前端设计师和工程师的首选。<a href="/xhtml/index.asp" title="XHTML 教程">现在开始学习 XHTML</a> !</p>
</div>
<div>
<h2>HTML 5</h2>
<p>HTML 5 是下一代的 HTML。</p>
<p>HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</p>
<p>在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。</p>
<p><a href="/html5/index.asp" title="HTML 5 教程">现在就开始学习 HTML 5</a> !</p>
</div>
<div>
<h2>CSS</h2>
<p>CSS 指层叠样式表(Cascading Style Sheets)。</p>
<p>在我们的 CSS 教程中,您将学习如何使用 CSS 同时控制整个站点的样式和布局。</p>
<p>通过与 XHTML 结合,CSS 可以帮助我们实行表现与结构分离的开发模式。</p>
<p>通过使用 CSS 来提升工作效率!<a href="/css/index.asp" title="CSS 教程">现在开始学习 CSS</a> !</p>
</div>
<div>
<h2>CSS3</h2>
<p>CSS3 是最新的 CSS 标准。</p>
<p>我们的 CSS3 教程教程向您讲解 CSS3 中的新特性。</p>
<p><a href="/css3/index.asp" title="CSS3 教程">现在就开始学习 CSS3</a> !</p>
</div>
<div>
<h2>TCP/IP</h2>
<p>TCP/IP 是针对因特网的通信协议。</p>
<p>在 W3School 的 TCP/IP 教程中,你将了解到什么是 TCP/IP,以及它如何工作。</p>
<p>关于 TCP/IP 知识,有助于您理解互联网的运行原理,是您学习 WEB 技术的基础。</p>
<p><a href="/tcpip/index.asp" title="TCP/IP 教程">现在开始学习 TCP/IP</a> !</p>
</div>
</div>
<div id="sidebar">
<div id="tools">
<h2>参考手册</h2>
<ul>
<li><a href="/tags/index.asp" title="HTML 参考手册">HTML/HTML5 标签</a></li>
<li><a href="/cssref/index.asp" title="CSS 参考手册">CSS 1,2,3</a></li>
<li><a href="/tags/html_ref_colornames.asp" title="HTML 颜色名">HTML 颜色</a></li>
<li><a href="/tags/html_ref_ascii.asp" title="HTML 7 比特 ASCII 代码 参考手册">HTML ASCII</a></li>
<li><a href="/tags/html_ref_entities.html" title="HTML Latin-1 字符实体">HTML Latin-1</a></li>
<li><a href="/tags/html_ref_symbols.html" title="HTML 4.01 符号实体">HTML 符号</a></li>
</ul>
<h2>实例/案例</h2>
<ul>
<li><a href="/example/html_examples.asp">HTML 实例</a></li>
<li><a href="/example/csse_examples.asp">CSS 实例</a></li>
</ul>
<h2>测验/考试</h2>
<ul>
<li><a href="/html/html_quiz.asp">HTML 测验</a></li>
<li><a href="/html5/html5_quiz.asp">HTML5 测验</a></li>
<li><a href="/xhtml/xhtml_quiz.asp">XHTML 测验</a></li>
<li><a href="/css/css_quiz.asp">CSS 测验</a></li>
</ul>
<h2>代码验证</h2>
<ul>
<li><a href="/site/site_validate.asp">验证 HTML</a></li>
<li><a href="/site/site_validate.asp">验证 CSS</a></li>
<li><a href="/site/site_validate.asp">验证 XHTML</a></li>
</ul>
</div>
</div>
<!--尾部-->
<div id="footer">
<p id="p1">
W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
</p>
<p id="p2">
使用条款和隐私条款。版权所有,保留一切权利。
赞助商:<a href="">上海赢科投资有限公司</a>。
蒙ICP备06004630号
</p>
</div>
</div>
</body>
</html>
感想
代码之路贵在坚持