网站建设高级教程,php教育视频网站开发,无法访问网站,网站赚钱的方式做一个个人博客第一步该怎么做#xff1f;
好多零基础的同学们不知道怎么迈出第一步。
那么#xff0c;就找一个现成的模板学一学呗#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题#xff0c;那就是#xff0c;那些模板都#xff0c;太#xff01;… 做一个个人博客第一步该怎么做
好多零基础的同学们不知道怎么迈出第一步。
那么就找一个现成的模板学一学呗毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题那就是那些模板都太复杂了
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单只有一个html页面和css的个人博客模板。
麻雀虽小五脏俱全。
基本上有了个人博客所需要的很多基本功能下一步只要花个一两小时学会它然后开始加图片美化就完了。
简直爽歪歪虽然直接用肯定不行但是拿来当一个学习材料那还是相当的顺手。
界面看起来是这个样子的。 虽然只有一个页面但是像什么标题导航侧边栏快捷菜单友链搜索列表简介预览页就很全。代码也很简单。我们可以先学然后再用我们的知识把它完美化不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多看也看不懂学也学不会。
下载地址在这里↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/88962119
代码我就全贴到这儿了大家可以看一看。
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
titleGreenhome Template, Free XHTML CSS Website Template/title
meta namekeywords contentGreenhome Template, Free XHTML CSS Website Layout /
meta namedescription contentGreenhome Template, Free XHTML CSS Layout /
link hreftemplatemo_style.css relstylesheet typetext/css /
/head
body
div idtemplatmeo_container_outterdiv idtemplatmeo_container_inner_01div idtemplatmeo_container_inner_02div idtemplatemo_menuullia href# classfirstHome/a/lilia href# classcurrentProducts/a/lilia href#Gallery/a/lilia href#Company/a/lilia href#Contact/a/li/ul/div !-- end of menu --div idtemplatemo_contentdiv idcontent_top/divdiv idcontent_top_left/divdiv classsection_w680 dashed_border_bottomdiv classsection_w300 dashed_border_righth2span01/spanWelcome to Greenhome/h2div classsection_w70img classimage_wrapper srcimages/templatemo_image_02.jpg altFree Template //divdiv classsection_w220pThis is a free CSS template provided by a hrefhttp://www.xxxx.com/ target_parentxxxx/a a hrefhttp://guantaow.taobao.com target_blankxxxx/a. You may use this template in your websites./ppLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna nisl. Quisque et nulla nec magna laoreet molestie sed eu enim. Nullam sit amet nisi eu ipsum malesuada tristique non sit amet nulla. /pdiv classbutton_01 button_greena href#Read more/a/div /divdiv classcleaner/div/divdiv idsite_title/divdiv classcleaner/div/divdiv classsection_w680div classsection_w300 dashed_border_righth2span02/spanLorem ipsum dolor/h2div classsection_w70img classimage_wrapper srcimages/templatemo_image_01.jpg altWeb Template //divdiv classsection_w220pPraesent vitae nisi sit amet odio pulvinar rutrum sed porta sem. Vestibulum convallis hendrerit feugiat. Morbi non lacus est, sit amet viverra augue. Phasellus adipiscing pharetra ipsum, sit amet auctor erat mollis eget. Nulla facilisi. Phasellus posuere turpis est, eu pulvinar leo. Nullam nec diam purus. Ut semper laoreet orci, id lacinia sem sodales interdum./pdiv classbutton_01 button_orangea href#Read more/a/div /divdiv classcleaner/div/divdiv classsection_w300h2span03/spanFeatured Products/h2div classsection_w70img classimage_wrapper srcimages/templatemo_image_02.jpg altCSS Template //divdiv classsection_w220h3Donec pellentesque viverra/h3pDuis pulvinar accumsan sagittis. Suspendisse potenti. Donec ultricies nibh vitae nisl suscipit quis mollis dolor eleifend./p/divdiv classcleaner/divdiv classsection_w70img classimage_wrapper srcimages/templatemo_image_01.jpg altHTML Template //divdiv classsection_w220h3Maecenas ut ante sit amet/h3pAenean porttitor tristique sem, nec sollicitudin enim faucibus egestas. Phasellus sit amet ligula sed sem posuere laoreet nec feugiat felis. /pdiv classbutton_01 button_bluea href#Read more/a/div /divdiv classcleaner/div/div/divdiv classcleaner/divdiv idcontent_bottom/div/divdiv idtemplatemo_footerdiv classfooter_section left_sectionh4Privacy Policy/h4pLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna nisl. Quisque et nulla nec magna laoreet molestie sed eu enim./p/divdiv classfooter_section right_sectionh4Partners/h4ul classfooter_listlia hrefhttp://www.xxxx.com/ target_parentxxxx/a/lilia href# target_parentFlash Templates/a/lilia href#/blog target_parentWeb Design Blog/a/li/ul/divdiv classmargin_bottom_10/divCopyright © 2024 a href#strongYour Company Name/strong/a | from a hrefhttp://www.xxxx.com target_parentxxxx/a | Validate a hrefhttp://validator.w3.org/check?urirefererXHTML/a amp; a hrefhttp://jigsaw.w3.org/css-validator/check/refererCSS/a /div !-- end of footer --div classcleaner/div/div !-- end of inner container--div classcleanernbsp;/div /div !-- end of inner container --
/div !-- end of container outter --
/body
/html
简单的一批十几分钟就搞清楚每块该怎么弄了。
下面是css
/*
CSS Credit: http://www.moobnn.com
*/body {margin: 0;padding: 0;line-height: 1.5em;font-family: Verdana, Geneva, sans-serif;font-size: 11px;color: #000000;background: #b9d5ff url(images/templatemo_main_bg.jpg) repeat-x top;
}a:link, a:visited { color: #000000; text-decoration: underline; font-weight: normal; }
a:active, a:hover { color: #0066FF; text-decoration: none; }p { margin: 0px; padding: 0 0 10px 0; }img { margin: 0px; padding: 0px; border: none; }.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }.dashed_border_bottom {border-bottom: 1px dashed #cccccc;
}.dashed_border_right {border-right: 1px dashed #cccccc;
}.button_01 a {clear: both;display: block;width: 195px;height: 22px;padding-top: 4px;padding-left: 10px;color: #ffffff;font-size: 12px;font-weight: normal;text-decoration: none;
}
.button_01 a:hover {color: #000000;
}.button_green {background: url(images/templatemo_readmore_green.jpg) no-repeat;
}.button_blue {background: url(images/templatemo_readmore_blue.jpg) no-repeat;
}.button_orange {background: url(images/templatemo_readmore_orange.jpg) no-repeat;
}.fl { float: left; }
.fr { float: right; }h1 {margin: 0px;padding: 10px 0;font-size: 34px;color: #ffffff;font-weight: normal;
}h2 {height: 15px;margin: 0 0 20px 0;padding: 18px 0 10px 0;font-size: 24px;color: #757575;font-weight: normal; letter-spacing: -2px;background: url(images/templatemo_icon_01.jpg) left bottom no-repeat;
}h2 span {float: left;padding-left: 3px;padding-right: 10px;display: block;color: #ffffff;
}h3 {margin: 0;padding: 0;font-size: 12px;color: #000000;font-weight: bold;
}h4 {margin: 0 0 5px 0;padding: 0;font-size: 12px;color: #99FF00;font-weight: bold;
}.em_text {color: #00ffff;
}.image_wrapper{margin-top: 3px;
}.fl_image {float: left;margin-right: 10px
}.fr_image {float: right;margin-left: 10px
}#templatmeo_container_outter {width: 940px;padding: 0 10px;margin: 0 auto; background: url(images/templatemo_container_outter_bg.png) repeat-y;
}#templatmeo_container_inner_01 {width: 940px;background: url(images/templatemo_container_inner_bottom.jpg) center bottom no-repeat;
}#templatmeo_container_inner_02 {width: 940px;padding-top: 40px;background: url(images/templatemo_main_bg.jpg) repeat-x;
}/* menu */#templatemo_menu {clear: both;width: 940px;padding: 0 10px;margin-bottom: 34px; background: url(images/templatemo_menu_bg.jpg) no-repeat;
}#templatemo_menu ul {width: 608px;overflow: hidden;padding: 0px;margin: 0px auto;list-style: none;
}#templatemo_menu ul li {padding: 0px;margin: 0px;display: inline;
}#templatemo_menu ul li a {float: left;display: block;height: 24px;width: 120px;padding: 1px 0;font-size: 18px;text-align: center;font-weight: normal;text-decoration: none;color: #ffffff; background: url(images/templatemo_menu_right.jpg) right top no-repeat;outline: none;border-left: 2px solid #ffffff;
}#templatemo_menu li a:hover, #templatemo_menu li .current {color: #99FF00;
}#templatemo_menu li .first {border: none;
}/* end of menu *//* content */#templatemo_content {clear: both;position: relative;width: 680px;padding: 0 130px 0 150px;margin-top: 24px;margin-bottom: 76px;background: url(images/templatemo_content_repeat.png) repeat-y;
}#templatemo_content #content_top {position: absolute;top: -24px;left: 0px;width: 940px;height: 24px;background: url(images/templatemo_content_top.png) no-repeat;
}#templatemo_content #content_top_left {position: absolute;top: 0px;left: 78px;width: 30px;height: 140px;background: url(images/templatemo_content_top_left.png) no-repeat;
}#templatemo_content #content_bottom {position: absolute;bottom: -36px;left: 0px;width: 940px;height: 36px;background: url(images/templatemo_content_bottom.png) no-repeat;
}.section_w680 {width: 680px;
}.section_w300 {float: left;width: 300px;padding-right: 19px;margin-right: 20px;padding-top: 20px;padding-bottom: 20px;
}.section_w300 p {text-align: justify;margin-bottom: 10px;
}.section_w70 {float: left;width: 70px;
}.section_w220 {float: right;width: 220px;
}#site_title {float: left;width: 360px;height: 280px;margin-right: -20px;padding-bottom: 20px;background: url(images/templatemo_logo.jpg) no-repeat;
}/* end of content *//* footer */#templatemo_footer {clear: both;overflow: hidden;width: 720px;padding: 15px 110px 0 110px;height: 130px;text-align: center;color: #ffffff;
}#templatemo_footer a {color: #ffffff;
}#templatemo_footer .footer_section {overflow: hidden;width: 300px;height: 90px;
}.left_section {float: left;text-align: left;
}.right_section {float: right;text-align: right;
}.footer_list {margin: 0px;padding: 0px;list-style: none;
}.footer_list li {padding: 0px;margin: 0px;
}#templatemo_footer .footer_list li a {color: #ffff00;text-decoration: none;
}#templatemo_footer .footer_list li a:hover {text-decoration: underline;
}
/* end of footer */
300多行的css也不算长好学得嘞
嘻嘻(#^.^#)
