深圳 网站设计公司价格,中国网站建设新闻,企业营销网站有哪些,网站托管哪家公司好做一个个人博客第一步该怎么做#xff1f;
好多零基础的同学们不知道怎么迈出第一步。
那么#xff0c;就找一个现成的模板学一学呗#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题#xff0c;那就是#xff0c;那些模板都#xff0c;太#xff01;…
做一个个人博客第一步该怎么做
好多零基础的同学们不知道怎么迈出第一步。
那么就找一个现成的模板学一学呗毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题那就是那些模板都太复杂了
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单只有一个html页面和css的个人博客模板。
麻雀虽小五脏俱全。
基本上有了个人博客所需要的很多基本功能下一步只要花个一两小时学会它然后开始加图片美化就完了。
简直爽歪歪虽然直接用肯定不行但是拿来当一个学习材料那还是相当的顺手。
界面看起来是这个样子的。 虽然只有一个页面但是像什么标题导航侧边栏快捷菜单友链搜索列表简介预览页就很全。代码也很简单。我们可以先学然后再用我们的知识把它完美化不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多看也看不懂学也学不会。
下载地址在这里↓↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/88922871 代码我就全贴到这儿了大家可以看一看。
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhtml xmlnshttp://www.w3.org/1999/xhtml xml:langen langen
headmeta nameDescription contentInformation architecture, Web Design, Web Standards. /
meta nameKeywords contentyour, keywords /
meta http-equivContent-Type contenttext/html; charsetiso-8859-1 /
meta nameDistribution contentGlobal /
meta nameAuthor contentErwin Aligam - ealigamgmail.com /
meta nameRobots contentindex,follow /link relstylesheet hrefimages/Outdoor.css typetext/css /titleOutdoor/title/head
body!-- wrap starts here --
div idwrap!--header --div idheader h1 idlogo-texta hrefindex.html titleoutdoor/a/h1 p idsloganput your site slogan here.../p div idheader-linkspa hrefindex.htmlHome/a | a hrefindex.htmlContact/a | a hrefindex.htmlSite Map/a /p /div !--header ends-- /divdiv idheader-photoimg srcimages/header-photo.jpg width870 height206 altheader-photo //div !-- navigation starts-- div idnavulli idcurrenta hrefindex.htmlHome/a/lilia hrefindex.htmlArchives/a/lilia hrefindex.htmlDownloads/a/lilia hrefindex.htmlServices/a/lilia hrefindex.htmlSupport/a/lilia hrefindex.htmlAbout/a/li /ul!-- navigation ends-- /div !-- content-wrap starts --div idcontent-wrapdiv idmaina nameTemplateInfo/ah2a hrefindex.htmlTemplate Info/a/h2p classpost-infoPosted by a hrefindex.htmlerwin/a/ppstrongOutdoor/strong is a free, W3C-compliant, CSS-based website templateby a hrefhttp://www.xxxxx.com/styleshout.com/a. This work isdistributed under the a rellicense hrefhttp://creativecommons.org/licenses/by/2.5/Creative Commons Attribution 2.5 License/a, which means that you are free touse and modify it for any purpose. All I ask is that you give me credit by including a stronglink back/strong toa hrefhttp://www.xxxxx.com/my website/a./ppYou can find more of my free template designs at a hrefhttp://www.xxxxx.com/my website/a.For premium commercial designs, you can check outa href# titleWebsite TemplatesDreamTemplate.com/a./pp classpostmeta a hrefindex.html classreadmoreRead more/a |a hrefindex.html classcommentsComments (7)/a | span classdateMay 20, 2007/span /pa nameSampleTags/ah2a hrefindex.htmlSample Tags/a/h2h3Code/h3 pcodecode-sample { br /font-weight: bold;br /font-style: italic;br / } /code/p h3Example Lists/h3olliHere is an example/liliof an ordered list/li /ol ulliHere is an example/liliof an unordered list/li /ul h3Blockquote/h3 blockquotepLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat..../p/blockquoteh3Image and text/h3pa hrefindex.htmlimg srcimages/image-sample.jpg width144 height144 altimage sample classfloat-left //aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. /ph3Table Styling/h3 tabletrth classfirststrongpost/strong date/ththtitle/ththdescription/th/trtr classrow-atd classfirst04.18.2007/tdtda hrefindex.htmlAugue non nibh/a/tdtda hrefindex.htmlLobortis commodo metus vestibulum/a/td/trtr classrow-btd classfirst04.18.2007/tdtda hrefindex.htmlFusce ut diam bibendum/a/tdtda hrefindex.htmlPurus in eget odio in sapien/a/td/trtr classrow-atd classfirst04.18.2007/tdtda hrefindex.htmlMaecenas et ipsum/a/tdtda hrefindex.htmlAdipiscing blandit quisque eros/a/td/trtr classrow-btd classfirst04.18.2007/tdtda hrefindex.htmlSed vestibulum blandit/a/tdtda hrefindex.htmlCras lobortis commodo metus lorem/a/td/tr/tableh3Example Form/h3form action# p labelName/labelinput namedname valueYour Name typetext size30 /labelEmail/labelinput namedemail valueYour Email typetext size30 /labelYour Comments/labeltextarea rows5 cols5/textareabr / input classbutton typesubmit / /p /form br / !-- main ends -- /divdiv idsidebarh3Search Box/h3 form action# classsearchformpinput namesearch_query classtextbox typetext /input namesearch classbutton valueSearch typesubmit //p /form h3Sidebar Menu/h3ul classsidemenu lia hrefindex.htmlHome/a/lilia href#TemplateInfoTemplate Info/a/lilia href#SampleTagsSample Tags/a/lilia hrefhttp://www.xxxxx.com/More Free Templates/a/li lia href# titleWeb TemplatesWeb Templates/a/li/ul h3Links/h3ul classsidemenulia hrefhttp://www.pdphoto.org/PDPhoto.org/a/lilia hrefhttp://www.mayang.com/textures/Mayangs Free Textures/a/lilia hrefhttp://www.alistapart.comAlistapart/a/li lia href#CSS Mania/a/li/ulh3Sponsors/h3ul classsidemenulia href# titleWebsite TemplatesDreamTemplate br /spanOver 6,000 Premium Web Templates/span/a/lilia href# titleWordPress ThemesThemeLayouts br /spanPremium WordPress amp; Joomla Themes/span/a/lilia href# titleWebsite HostingImHosted.com br /spanAffordable Web Hosting Provider/span/a/lilia href# titleStock PhotosDreamStock br /spanDownload Amazing Stock Photos/span/a/lilia href# titleWebsite BuilderEvrsoft br /spanWebsite Builder Software amp; Tools/span/a/lilia href# titleWeb HostingWeb Hosting br /spanTop 10 Hosting Reviews/span/a/li/ulh3Wise Words/h3pquot;Trials teach us what we are; they dig up the soil, and let us see what we are made of.quot; /pp classalign-right- Charles Haddon Spurgeon/ph3Support Styleshout/h3pIf you are interested in supporting my work and would like to contribute, you arewelcome to make a small donation through the a hrefhttp://www.xxxxx.com/donate link/a on my website - it will be a great help and will surely be appreciated./p !-- sidebar ends -- /div!-- content-wrap ends-- /div!-- footer starts -- div idfooter-wrapdiv idfooter-columnsdiv classcol3h3Tincidunt/h3ullia hrefindex.htmlconsequat molestie/a/lilia hrefindex.htmlsem justo/a/lilia hrefindex.htmlsemper/a/lilia hrefindex.htmlmagna sed purus/a/lilia hrefindex.htmltincidunt/a/li/ul/divdiv classcol3-centerh3Sed purus/h3ullia hrefindex.htmlconsequat molestie/a/lilia hrefindex.htmlsem justo/a/lilia hrefindex.htmlsemper/a/lilia hrefindex.htmlmagna sed purus/a/lilia hrefindex.htmltincidunt/a/li/ul/divdiv classcol3h3Praesent/h3ullia hrefindex.htmlconsequat molestie/a/lilia hrefindex.htmlsem justo/a/lilia hrefindex.htmlsemper/a/lilia hrefindex.htmlmagna sed purus/a/lilia hrefindex.htmltincidunt/a/li /ul/div!-- footer-columns ends --/div div idfooter-bottom pcopy; 2010 strongYour Company/strongnbsp;nbsp;nbsp;nbsp;a hrefhttp://www.xxxxx.com/ titleWebsite Templateswebsite templates/a from a hrefhttp://www.xxxxx.com/xxxxx.com/a |Valid a hrefhttp://validator.w3.org/check?urirefererXHTML/a | a hrefhttp://jigsaw.w3.org/css-validator/check/refererCSS/anbsp;nbsp;nbsp;nbsp;nbsp;nbsp;a hrefindex.htmlHome/anbsp;|nbsp;a hrefindex.htmlSitemap/anbsp;|nbsp;a hrefindex.htmlRSS Feed/a/p/div!-- footer ends--
/div!-- wrap ends here --
/div/body
/html简单的一批十几分钟就搞清楚每块该怎么弄了。
下面是css
/* --------------------------------------------
AUTHOR : Erwin Aligam
WEBSITE : http://www.moobnn.com/
TEMPLATE NAME : Outdoor
TEMPLATE CODE : S-0020
VERSION : 1.1
LAST DATE MODIFIED : January 18, 2010---------------------------------------------- *//* --------------------------------------------HTML ELEMENTS
---------------------------------------------- *//* Top Elements */
* { margin: 0; padding: 0; outline: 0 }body {background: #f7f0e3 url(bg.jpg) repeat-x;font: 11px/1.7em Verdana, Tahoma, Arial, Geneva, sans-serif;color: #666666; text-align: center;margin: 0 0 50px 0;
}/* links */
a, a:visited { color: #5A93C9;background: inherit;text-decoration: none;
}
a:hover {color: #88ac0b;background: inherit;text-decoration: underline;
}/* headers */
h1, h2, h3 {font-family: Trebuchet MS, Tahoma, Sans-serif;color: #444;
}
h1 {font-size: 3.1em;font-weight: normal;letter-spacing: -1px;
}
h2 {font-size: 3em;color: #88ac0b;
}
h3 {font-size: 1.8em;font-weight: normal;
}h1, h2, h3, p {padding: 10px; margin: 0;
}
ul, ol {margin: 5px 20px;padding: 0 20px;
}
ul {list-style: none;
}/* images */
img {background: #fafafa;border: 1px solid #dcdcdc;padding: 8px;
}
img.float-right {margin: 5px 0px 10px 10px;
}
img.float-left {margin: 5px 10px 10px 0px;
}code {margin: 5px 0;padding: 10px;text-align: left;display: block;overflow: auto; font: 500 1em/1.5em Lucida Console, courier new, monospace ;/* white-space: pre; */border: 1px solid #F4F3EC; background: #FAFAE7;
}
acronym {cursor: help;border-bottom: 1px dashed #777;
}
blockquote {margin: 10px;padding: 0 0 0 35px; border: 1px solid #F4F3EC; background: #FAFAE7 url(quote.jpg) no-repeat 7px 10px; font: bold 1.3em/1.5em Trebuchet MS, Tahoma, Sans-serif;color: #976957;
}/* start - table */
table {border-collapse: collapse;margin: 10px;
}
th strong {color: #fff;
}
th {background: #93BC0C url(nav.jpg) repeat-x;height: 35px;padding-left: 12px;padding-right: 12px;color: #fff;text-align: left;border-left: 1px solid #B6D59A;border-bottom: solid 2px #fff;
}
tr {height: 32px;
}
td {padding-left: 11px;padding-right: 11px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;
}
td.first,th.first {border-left: 0px;
}
tr.row-a {background: #F8F8F8;
}
tr.row-b {background: #EFEFEF;
}
/* end - table *//* form elements */
form {margin:10px; padding: 5px 10px;border: 1px solid #f1f1f1; background-color: #f5f5f5;
}
label {display:block;font-weight:bold;margin:5px 0;
}
input {padding:2px;border:1px solid #eee;font: normal 1em Verdana, sans-serif;color:#777;
}
textarea {width:400px;padding:2px;font: normal 1em Verdana, sans-serif;border:1px solid #eee;height:100px;display:block;color:#777;
}
input.button { font: bold 12px Arial, Sans-serif; height: 24px;margin: 0;padding: 2px 3px; color: #FFF;background: #8EB50C url(nav.jpg) repeat-x 0 0;border: 1px solid #88AD0C;
}/* search form */
.searchform {background-color: transparent;border: none; margin: 0 0 0 10px; padding: 5px 0 15px 0;width: 250px;
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { width: 170px;color: #777; height: 18px;padding: 2px; border: 1px solid #E5E5E5;vertical-align: top;
}
.searchform input.button { width: 60px;height: 24px;padding: 2px 5px;vertical-align: top;
}/********************************************LAYOUT
********************************************/
#wrap {position: relative;background: #fff url(wrap-bg.jpg) repeat-y;width: 900px; margin: 50px auto 0 auto;text-align: left;
}
#content-wrap {position: relative;background: #fff url(content-bg.jpg) repeat-x;clear: both;float: left; width: 870px; padding: 0; margin-left: 15px; display: inline;border-top: 5px solid #fff;border-bottom: 1px solid #e5e5e5;border-left: 1px solid #fff;border-right: 1px solid #fff;
}
#header {position: relative;background: #fff url(header-bg.jpg) repeat-x;width: 870px; height: 100px; padding: 0; margin: 0px auto;
}
#header h1#logo-text a {position: absolute;margin: 0; padding: 0;font: normal 43px Georgia, Times New Roman, Times, serif;letter-spacing: -1.5px;color: #111;text-transform: none;text-decoration: none;/* change the values of top and left to adjust the position of the logo*/top: 22px; left: 20px;
}
#header p#slogan {position: absolute;margin: 0; padding: 0;font: normal 12px Georgia, Times New Roman, Times, serif;text-transform: none;color: #5b4a29;/* change the values of top and left to adjust the position of the slogan*/top: 67px; left: 25px;
}/* header links */
#header #header-links {position: absolute;top: 25px; right: 10px; color: #5b4a29;font: normal 11px Georgia, Times New Roman, Times, serif;text-transform: uppercase;
}
#header #header-links a { color: #5b4a29;text-decoration: none; padding: 0 2px;font-weight: bold;
}
#header #header-links a:hover {color: #111;
}/* header-photo */
#header-photo {clear: both;background: #fff;margin: 5px auto;padding: 0; height:206px; width: 870px;
}
#header-photo img {border: none;margin: 0; padding: 0;
} /* Navigation */
#nav {clear: both; margin: 0; padding: 0; height: 45px;
}
#nav ul {float: left;list-style: none;background: url(nav.jpg) repeat-x; width: 870px; height: 45px;text-transform: uppercase;margin: 0 0 0 15px;padding: 0; display: inline;
}
#nav ul li {display: inline;margin: 0; padding: 0;
}
#nav ul li a {display: block;float: left;width: auto;margin: 0;padding: 0 14px;border-right: 1px solid #899D00;border-left: 1px solid #A7D101;font: bold 14px/45px Century Gothic, Trebuchet MS, Helvetica, Arial, Geneva, sans-serif;text-transform: uppercase;text-decoration: none; letter-spacing: 1px;color: #fff;
}
#nav ul li a:hover,
#nav ul li a:active {background: url(nav-hover.jpg) repeat-x;
}
#nav ul li#current a { background: url(nav-current.jpg) repeat-x;
}/* Main Column */
#main {float: left;width: 550px;padding: 0; margin: 20px 0 0 10px;display: inline;
}
#main h2 {margin-top: 10px;padding-bottom: 3px;font: bold 2.9em/1em Trebuchet MS, Tahoma, Sans-serif;color: #895F30;letter-spacing: -1px; text-transform: none;
}
#main h2 a {color: #895F30; text-decoration: none;
}
#main ul li {list-style-image: url(bullet.gif);
}/* Sidebar */#sidebar {float: right;width: 280px;padding: 0; margin: 25px 10px 0 0;display: inline;
}
#sidebar h3 {margin-top: 10px;margin-left: 5px;padding: 5px 5px; font: normal 1.9em Trebuchet MS, Tahoma, Sans-serif;color: #899B0D;
}/* sidemenus */
#sidebar ul.sidemenu {text-align: left;margin: 10px 10px 8px 8px; padding: 0;border-top: 1px solid #EBEBEB;
}
#sidebar ul.sidemenu li {list-style: none;border-bottom: 1px solid #EBEBEB;padding: 8px 5px;margin: 0;
}
* html body #sidebar ul.sidemenu li {height: 1%;
}
#sidebar ul.sidemenu li a:link,
#sidebar ul.sidemenu li a:visited {color: #895F30;padding-left: 0;font-weight: bold;text-decoration: none;
}
#sidebar ul.sidemenu li a span {color: #9F9F9F;font-family: Georgia, Times New Roman, Times, Serif;font-style: normal;font-weight: normal;
}
#sidebar ul.sidemenu li a:hover { color: #000; text-decoration: none; }
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }/* footer */
#footer-wrap {clear: both;width: 900px;text-align: left;padding: 15px 0; border-bottom: 15px solid #fff;border-top: 1px solid #fff;
}
#footer-wrap a:hover {color: #000;
}
#footer-wrap h3 {color: #976834;margin: 10px 0 20px 0;padding: 0 10px; text-transform: uppercase;font-weight: normal;font-size: 1.6em;
}#footer-columns {color: #888;margin: 0 auto; padding: 0; width: 840px;
}
#footer-columns a {text-decoration: none;font-weight: bold;color: #666666;
}
#footer-columns ul {list-style: none;margin: 10px 0 0 0; padding: 0; border-top: 1px solid #e5e5e5;
}
#footer-columns li {border-bottom: 1px solid #e5e5e5;
}
#footer-columns li a {display: block;font-weight: normal;padding: 7px 0 7px 10px;width: 96%;
}
#footer-columns .col3, .col3-center {float: left;width: 32%;
}
#footer-columns .col3-center { margin: 0 15px;
}/* bottom */
#footer-bottom {clear: both;color: #666; margin: 0 auto; width: 870px;padding: 25px 0 0 0;text-align: center;font-size: .95em;
}
#footer-bottom a {color: #976834;text-decoration: none;
}/* postmeta */
.postmeta { padding: 8px 5px; margin: 20px 10px 15px 10px;font-size: 95%; color: #99997D;border: 1px solid #EAE7DB;background: #FAFAE7;
}
.postmeta .date{ margin: 0 10px 0 5px; }
.postmeta a.comments { margin: 0 10px 0 5px; }
.postmeta a.readmore { margin: 0 10px 0 5px; }.post-info { font-size: .95em; padding-top: 0; margin-left: 5px; }/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }/* clearing */
.fix {clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;
}
.clear { display:inline-block; }
.clear:after {display:block;visibility:hidden;clear:both;height:0;content: ;
}
css也不算长好学得嘞
嘻嘻(#^.^#)
