怎么才能打开一些网站,家居企业网站建设效果,全球新冠疫苗接种率,沈阳哪个男科医院好做一个个人博客第一步该怎么做#xff1f;
好多零基础的同学们不知道怎么迈出第一步。
那么#xff0c;就找一个现成的模板学一学呗#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题#xff0c;那就是#xff0c;那些模板都#xff0c;太#xff01;…
做一个个人博客第一步该怎么做
好多零基础的同学们不知道怎么迈出第一步。
那么就找一个现成的模板学一学呗毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题那就是那些模板都太复杂了
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单只有一个html页面和css的个人博客模板。
麻雀虽小五脏俱全。
基本上有了个人博客所需要的很多基本功能下一步只要花个一两小时学会它然后开始加图片美化就完了。
简直爽歪歪虽然直接用肯定不行但是拿来当一个学习材料那还是相当的顺手。
界面看起来是这个样子的。 虽然只有一个页面但是像什么标题导航侧边栏快捷菜单友链搜索列表简介预览页就很全。代码也很简单。我们可以先学然后再用我们的知识把它完美化不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多看也看不懂学也学不会。
下载地址在这里↓↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/88934742
代码我就全贴到这儿了大家可以看一看。
!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 /
titleSport Center - free website template/title
meta namekeywords contentfree web template, sport center, CSS, HTML, 2 columns /
meta namedescription contentFree Website Template - Sport Center /
link hreftemplatemo_style.css relstylesheet typetext/css /
/head
bodydiv idtmeplatemo_containerdiv idtemplatemo_menuullia href# classcurrentHome/a/lilia href#About/a/lilia hrefhttp://www.xxxxxxxx.com target_parentTemplates/a/lilia href# target_parentGallery/a/lilia href#Members/a/lilia href# classlastContact Us/a/li/ul /div !-- end of menu --div idtemplatemo_header_01/div !-- end of header --!-- ** OR div idtemplatemo_header_02div idsite_titleSport CenterspanYour tagline goes here/span/div/div end of header --div idtmeplatemo_contentdiv idtemplatemo_side_columndiv classtop/divdiv classheader_01News amp; Events/divdiv classnews_event_sectiondiv classheader_02Lorem ipsum dolor sit amet/divimg srcimages/templatemo_image_01.jpg altphoto one /pDonec ut felis libero. Nunc vel libero libero, in dignissim urna. Praesent tempor, arcu at egestas vestibulum, lorem elit viverra velit, sit amet gravida ligula ante et sem./pdiv classbutton_01a href#Read more/a/div/divdiv classnews_event_sectiondiv classheader_02Integer in magna nec lacus/divimg srcimages/templatemo_image_00.jpg altphoto two /pSuspendisse potenti. Aliquam erat volutpat. Mauris tempus massa vitae sem posuere pharetra. Donec eget neque erat, ac venenatis libero. Cras consequat pharetra sem ut imperdiet./pdiv classbutton_01a href#Read more/a/div/divdiv classcleaner/divdiv classbottom/div/div !-- end of side column --div idtemplatemo_main_columndiv classheader_01Welcome to Sport Center/divdiv classsection_w480div classimage_wrapper fl_imgimg srcimages/templatemo_image_02.jpg altphoto three //divp classem_textThis Free CSS Template is provided by a hrefhttp://www.xxxxxxxx.com target_parent模板在线/a a hrefhttp://guantaow.taobao.com target_blank厚朴网络 淘宝店/a. You may use this template in your websites. Credit goes to a href# target_blankFree Photos/a for photos used in this template./ppLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae metus quis libero consectetur egestas. In hac habitasse platea dictumst. Suspendisse tempus, metus in semper accumsan, dolor purus imperdiet magna, a iaculis quam justo quis purus. Etiam ut erat enim, et aliquet orci./pdiv classbutton_01a href#Read more/a/div/divdiv classsection_w480div classheader_01Our Activities/divpLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae metus quis libero consectetur egestas. In hac habitasse platea dictumst. Suspendisse tempus, metus in semper accumsan./pdiv classmargin_bottom_20/divdiv classsection_w160 fldiv classimage_wrapperimg srcimages/templatemo_image_03.jpg altimage //div/divdiv classsection_w270 frul classcontent_list_01liCras urna nisi, porta et gravida blandit, laoreet ornare nunc./liliDonec tincidunt sem eget velit cursus sit amet ullamcorper mi vulputate. /li/uldiv classmargin_bottom_20/divdiv classbutton_01a href#Read more/a/div/divdiv classcleaner/div/div /divdiv classcleaner/div/div !-- end of content --div idtemplatemo_footerCopyright © 2048 a href#Your Company Name/a | from a hrefhttp://www.xxxxxxxx.com target_parent网站模板/adiv classmargin_bottom_20/diva hrefhttp://validator.w3.org/check?urirefererimg styleborder:0;width:88px;height:31px srchttp://www.w3.org/Icons/valid-xhtml10 altValid XHTML 1.0 Transitional width88 height31 vspace8 border0 //aa hrefhttp://jigsaw.w3.org/css-validator/check/refererimg styleborder:0;width:88px;height:31px srchttp://jigsaw.w3.org/css-validator/images/vcss-blue altValid CSS! vspace8 border0 //a/div !-- end of footer --/div !-- end of container --/body
/html
简单的一批十几分钟就搞清楚每块该怎么弄了。
下面是css
/*
CSS Credit: http://www.moobnn.com
*/body {margin: 0;padding: 0;line-height: 1.5em;font-family: Georgia, Times New Roman, Times, serif;font-size: 12px;color: #d4d1c5;background: #141212 url(images/templatemo_main_bg.jpg) repeat;
}a:link, a:visited { color: #e8c521; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #e8c521; text-decoration: underline; }p {margin: 0px;padding: 0px;
}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_15 { clear: both; width: 100%; height: 15px; 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_40 { margin-right: 40px; }
.margin_right_70 { margin-right: 70px; }.fl { float: left; }
.fr { float: right }.button_01 a {clear: both;display: block;width: 100px;height: 21px;padding-top: 5px;background: url(images/templatemo_button_01.jpg) no-repeat;color: #000000;font-size: 12px;font-weight: bold;text-align: center;text-decoration: none;
}.header_01 {clear: both;color: #fcd82b;padding: 5px 0 10px 0;border-bottom: 1px dashed #fcd82b;margin-bottom: 20px;font-size: 26px;
}.header_02 {clear: both;color: #ffffff;padding: 0;margin-bottom: 5px;font-size: 14px;font-weight: bold;
}.em_text {color: #ffffff;
}#tmeplatemo_container {width: 980px;margin: 0 auto;background: #4a483f;
}/* menu */#templatemo_menu {clear: both;width: 980px;height: 55px;background: url(images/templatemo_menu_bg.jpg) repeat-x;
}#templatemo_menu ul {margin: 0 auto;padding: 0px;width: 790px; /* ( 138 x no. of menu item ) - 38 */list-style: none;
}#templatemo_menu ul li {padding: 0px;margin: 0px;display: inline;
}#templatemo_menu ul li a {float: left;display: block;width: 100px;height: 40px;padding: 15px 38px 0 0;background: url(images/templatemo_menu_right.jpg) right top no-repeat;font-size: 14px;font-weight: bold;text-align: center;text-decoration: none;color: #707070; outline: none;
}#templatemo_menu li a:hover, #templatemo_menu li .current {color: #000000;
}#templatemo_menu li .last {padding-right: 0px; background: none;
}/* end of menu*//* header */#templatemo_header_01 {clear: both;width: 980px;height: 220px;background:url(images/templatemo_header_bg.jpg) no-repeat;
}/*----- OR ------*/#templatemo_header_02 {clear: both;width: 980px;height: 220px;text-align: center; background: url(images/templatemo_header_bg_blank.jpg) no-repeat;
}#templatemo_header_02 #site_title {padding: 80px 0 0 0;font-size: 40px;color: #eccd35;font-weight: bold;
}#site_title span {display: block;color: #cba810;margin-top: 20px;font-size: 16px;
}/* end of header *//* contetn */#tmeplatemo_content {clear: both;width: 880px;padding: 10px 50px;background: #4a483f;
}/* side_column */#templatemo_side_column {float: left;position: relative;width: 260px; padding: 45px 20px;background: #424038;
}#templatemo_side_column .top {position: absolute;width: 300px;height: 45px;top: 0px;left: 0px;background: url(images/templatemo_side_column_top.jpg) no-repeat;
}#templatemo_side_column .bottom {position: absolute;width: 300px;height: 45px;bottom: 0px;left: 0px;background: url(images/templatemo_side_column_bottom.jpg) no-repeat;
}#templatemo_side_column img {border: 5px solid #000000;margin-bottom: 5px;
}.news_event_section {clear: both;margin-bottom: 30px;
}.news_event_section p {margin-bottom: 10px;
}#templatemo_main_column {float: right;padding-top: 50px;width: 480px;
}#templatemo_main_column p {margin-bottom: 15px;
}.section_w480 {clear: both;width: 480px;margin-bottom: 60px;
}.section_w160 {width: 170px;
}.section_w270 {width: 270px;
}.image_wrapper img {border: 5px solid #000000;
}.fl_img {float: left;margin: 3px 20px 10px 0px;
}.image_wrapper .fr_img img {float: right;margin: 3px 20px 5px 0px;
}.content_list_01 {margin: 0 0 0 15px;padding: 0px;list-style: decimal-leading-zero;
}.content_list_01 li {margin: 0px;padding: 0 0 10px 0;
}
/* end of content *//* footer */
#templatemo_footer {width: 880px;padding: 80px 50px 0 50px;margin: 0 auto;background: #332e2e url(images/templatemo_footer_bg.jpg) no-repeat;min-height: 130px;
}#templatemo_footer a {color: #f6d229;
}/* end of footer */
css也不算长好学得嘞
嘻嘻(#^.^#)
