Java学习日志18.7.22
主要内容
今天主要在家学习了网站的制作，通过模仿网站的代码来学习
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
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(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(bg.png) 0 -250px no-repeat;
}
div#searchui
{
margin:0;
padding:0;
width:306px;
height:100px;
background-color: transparent;
float:right;
}
#searchui input.button
{
padding:0;
margin:0;
background:#AE4141;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
width:30px;
height:30px;
}
#searchui input.box
{
margin:0;
margin-top:35px;
width:256px;
height:28px;
background:#fdfdfd;
font:12px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #ddd;
}
</style>
</head>
<body class="html">
<div id="wrapper">
<div id="header">
<a href="/index.html" title="w3school 在线教程" style="float:left;">w3school 在线教程</a>
<div id="ad_head">
<script type="text/javascript"><!--
google_ad_client = "pub-3381531532877742";
/* 728x90, 创建于 08-12-1 */
google_ad_slot = "7423315034";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><ins id="aswift_0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent;"><ins id="aswift_0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent;"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;width:728px;height:90px;"></iframe></ins></ins>
</div>
</div>
<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 id="navsecond">
<div id="course"><h2>CSS 基础教程</h2>
<ul>
<li class="currentLink"><a href="/css/index.asp" title="CSS 教程">CSS 教程</a></li>
<li><a href="/css/css_jianjie.asp" title="CSS 简介">CSS 简介</a></li>
<li><a href="/css/css_syntax.asp" title="CSS 基础语法">CSS 基础语法</a></li>
<li><a href="/css/css_syntax_pro.asp" title="CSS 高级语法">CSS 高级语法</a></li>
<li><a href="/css/css_syntax_descendant_selector.asp" title="CSS 派生选择器">CSS 派生选择器</a></li>
<li><a href="/css/css_syntax_id_selector.asp" title="CSS id 选择器">CSS id 选择器</a></li>
<li><a href="/css/css_syntax_class_selector.asp" title="CSS 类选择器">CSS 类选择器</a></li>
<li><a href="/css/css_syntax_attribute_selector.asp" title="CSS 属性选择器">CSS 属性选择器</a></li>
<li><a href="/css/css_howto.asp" title="如何创建 CSS">CSS 创建</a></li>
</ul>
<h2>CSS 样式</h2>
<ul>
<li><a href="/css/css_background.asp" title="CSS 背景">CSS 背景</a></li>
<li><a href="/css/css_text.asp" title="CSS 文本">CSS 文本</a></li>
<li><a href="/css/css_font.asp" title="CSS 字体">CSS 字体</a></li>
<li><a href="/css/css_link.asp" title="CSS 链接">CSS 链接</a></li>
<li><a href="/css/css_list.asp" title="CSS 列表">CSS 列表</a></li>
<li><a href="/css/css_table.asp" title="CSS 表格">CSS 表格</a></li>
<li><a href="/css/css_outline.asp" title="CSS 轮廓">CSS 轮廓</a></li>
</ul>
<h2>CSS 框模型</h2>
<ul>
<li><a href="/css/css_boxmodel.asp" title="CSS 框模型概述">CSS 框模型概述</a></li>
<li><a href="/css/css_padding.asp" title="CSS 内边距">CSS 内边距</a></li>
<li><a href="/css/css_border.asp" title="CSS 边框">CSS 边框</a></li>
<li><a href="/css/css_margin.asp" title="CSS 外边距">CSS 外边距</a></li>
<li><a href="/css/css_margin_collapsing.asp" title="CSS 外边距合并">CSS 外边距合并</a></li>
</ul>
<h2>CSS 定位</h2>
<ul>
<li><a href="/css/css_positioning.asp" title="CSS 定位概述">CSS 定位概述</a></li>
<li><a href="/css/css_positioning_relative.asp" title="CSS 相对定位">CSS 相对定位</a></li>
<li><a href="/css/css_positioning_absolute.asp" title="CSS 绝对定位">CSS 绝对定位</a></li>
<li><a href="/css/css_positioning_floating.asp" title="CSS 浮动">CSS 浮动</a></li>
</ul>
<h2>CSS 选择器</h2>
<ul>
<li><a href="/css/css_selector_type.asp" title="CSS 元素选择器">CSS 元素选择器</a></li>
<li><a href="/css/css_selector_grouping.asp" title="CSS 选择器分组">CSS 选择器分组</a></li>
<li><a href="/css/css_selector_class.asp" title="CSS 类选择器详解">CSS 类选择器详解</a></li>
<li><a href="/css/css_selector_id.asp" title="CSS ID 选择器详解">CSS ID 选择器详解</a></li>
<li><a href="/css/css_selector_attribute.asp" title="CSS 属性选择器详解">CSS 属性选择器详解</a></li>
<li><a href="/css/css_selector_descendant.asp" title="CSS 后代选择器">CSS 后代选择器</a></li>
<li><a href="/css/css_selector_child.asp" title="CSS 子元素选择器">CSS 子元素选择器</a></li>
<li><a href="/css/css_selector_adjacent_sibling.asp" title="CSS 相邻兄弟选择器">CSS 相邻兄弟选择器</a></li>
<li><a href="/css/css_pseudo_classes.asp" title="CSS 伪类">CSS 伪类</a></li>
<li><a href="/css/css_pseudo_elements.asp" title="CSS 伪元素">CSS 伪元素</a></li>
</ul>
<h2>CSS 高级</h2>
<ul>
<li><a href="/css/css_align.asp" title="CSS 水平对齐">CSS 对齐</a></li>
<li><a href="/css/css_dimension.asp" title="CSS 尺寸">CSS 尺寸</a></li>
<li><a href="/css/css_classification.asp" title="CSS 分类">CSS 分类</a></li>
<li><a href="/css/css_navbar.asp" title="CSS 导航栏">CSS 导航栏</a></li>
<li><a href="/css/css_image_gallery.asp" title="CSS 图片库">CSS 图片库</a></li>
<li><a href="/css/css_image_transparency.asp" title="CSS 图片透明度">CSS 图片透明</a></li>
<li><a href="/css/css_mediatypes.asp" title="CSS 媒介类型">CSS 媒介类型</a></li>
<li><a href="/css/css_dont.asp" title="CSS 注意事项">CSS 注意事项</a></li>
<li><a href="/css/css_summary.asp" title="CSS 总结">CSS 总结</a></li>
</ul>
<h2>CSS 实例</h2>
<ul>
<li><a href="/example/csse_examples.asp" title="CSS 实例">CSS 实例</a></li>
</ul>
<h2>CSS 测验</h2>
<ul>
<li><a href="/css/css_quiz.asp" title="CSS 测验">CSS 测验</a></li>
</ul>
<h2>CSS 参考手册</h2>
<ul>
<li><a href="/cssref/index.asp" title="CSS 参考手册">CSS 参考手册</a></li>
<li><a href="/cssref/css_selectors.asp" title="CSS 选择器参考手册">CSS 选择器</a></li>
<li><a href="/cssref/css_ref_aural.asp" title="CSS 听觉参考手册">CSS 听觉参考手册</a></li>
<li><a href="/cssref/css_websafe_fonts.asp" title="CSS 网络安全字体组合">CSS 网络安全字体</a></li>
<li><a href="/cssref/css_units.asp" title="CSS 单位">CSS 单位</a></li>
<li><a href="/cssref/css_colors.asp" title="CSS 颜色">CSS 颜色</a></li>
<li><a href="/cssref/css_colors_legal.asp" title="CSS 合法颜色值">CSS 颜色值</a></li>
<li><a href="/cssref/css_colornames.asp" title="CSS 颜色名">CSS 颜色名</a></li>
<li><a href="/cssref/css_colorsfull.asp" title="CSS 颜色十六进制值">CSS 颜色十六进制</a></li>
</ul>
</div><div id="selected">
<h2>建站手册</h2>
<ul>
<li><a href="/site/index.asp" title="网站构建">网站构建</a></li>
<li><a href="/w3c/index.asp" title="万维网联盟 (W3C)">万维网联盟 (W3C)</a></li>
<li><a href="/browsers/index.asp" title="浏览器信息">浏览器信息</a></li>
<li><a href="/quality/index.asp" title="网站品质">网站品质</a></li>
<li><a href="/semweb/index.asp" title="语义网">语义网</a></li>
<li><a href="/careers/index.asp" title="职业规划">职业规划</a></li>
<li><a href="/hosting/index.asp" title="网站主机">网站主机</a></li>
</ul>
<h2><a href="/about/index.asp" title="关于 W3School" id="link_about">关于 W3School</a></h2>
<h2><a href="/about/about_helping.asp" title="帮助 W3School" id="link_help">帮助 W3School</a></h2>
</div>
</div>
<div id="maincontent">
<h1>CSS 教程</h1>
<div id="tpn">
<ul class="prenext">
<li class="pre"><a href="/css/index.asp" title="CSS 教程">CSS 教程</a></li>
<li class="next"><a href="/css/css_jianjie.asp" title="CSS 简介">CSS 简介</a></li>
</ul>
</div>
<div id="intro">
<h2>CSS 教程</h2>
<p>通过使用 CSS 来提升工作效率！</p>
<p>在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。</p>
<p><a href="/css/css_jianjie.asp" title="CSS 简介">开始学习 CSS</a> ！</p>
</div>
<div>
<h2>CSS 实例</h2>
<p>学习 70 个实例。您可以对 CSS 代码进行编辑，然后单击测试按钮来查看结果。</p>
<p><a href="/example/csse_examples.asp" title="CSS 实例">亲自试一下吧</a> ！</p>
</div>
<div>
<h2>CSS 测验</h2>
<p>在 W3School 测试您的 CSS 技能！</p>
<p><a href="/css/css_quiz.asp" title="CSS 测验">开始 CSS 测验</a>！</p>
</div>
<div>
<h2>CSS 参考手册</h2>
<p>在 W3School，我们提供完整的 CSS 参考手册（已升级为 CSS3）。</p>
<p><a href="/cssref/index.asp" title="CSS 参考手册">CSS 参考手册</a></p>
</div>
<div id="bpn">
<ul class="prenext">
<li class="pre"><a href="/css/index.asp" title="CSS 教程">CSS 教程</a></li>
<li class="next"><a href="/css/css_jianjie.asp" title="CSS 简介">CSS 简介</a></li>
</ul>
</div>
<div style="background-color:#fcfdf8; padding:0;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- W3School 正文底部广告位 -->
<ins class="adsbygoogle" style="display:inline-block;width:800px;height:250px" data-ad-client="ca-pub-3381531532877742" data-ad-slot="9384069314" data-adsbygoogle-status="done"><ins id="aswift_2_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:800px;background-color:transparent;"><ins id="aswift_2_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:800px;background-color:transparent;"><iframe width="800" height="250" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_2" name="aswift_2" style="left:0;position:absolute;top:0;width:800px;height:250px;"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<!-- maincontent end -->
<div id="sidebar">
<div id="tools">
<h5 id="tools_reference"><a href="/cssref/index.asp">CSS 参考手册</a></h5>
<h5 id="tools_example"><a href="/example/csse_examples.asp">CSS 实例</a></h5>
<h5 id="tools_quiz"><a href="/css/css_quiz.asp">CSS 测验</a></h5>
</div>
<div id="ad">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-3381531532877742";
/* sidebar-160x600 */
google_ad_slot = "3772569310";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><ins id="aswift_1_expand" style="display:inline-table;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:160px;background-color:transparent;"><ins id="aswift_1_anchor" style="display:block;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:160px;background-color:transparent;"><iframe width="160" height="600" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;width:160px;height:600px;"></iframe></ins></ins>
</div>
</div>
<div id="footer">
<p id="p1">
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
</p>
<p id="p2">
使用条款和隐私条款。版权所有，保留一切权利。
赞助商：<a href="">上海赢科投资有限公司</a>。
蒙ICP备06004630号
</p>
</div>
</div>
<!-- wrapper end -->
<iframe id="google_osd_static_frame_5252454233121" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px;"></iframe></body>
</html>感想
感觉基本不太会，代码之路还很长