做一个个人博客第一步该怎么做？整个简单模板学一学吧

最新推荐文章于 2024-09-20 13:39:31 发布

锁住子锁不住

最新推荐文章于 2024-09-20 13:39:31 发布

阅读量396

点赞数 7

文章标签：学习 html 前端模板 javascript

本文链接：https://blog.csdn.net/qqhxmdq/article/details/136829959

版权

做一个个人博客第一步该怎么做？

好多零基础的同学们不知道怎么迈出第一步。

那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。

但是这样也有个问题，那就是，那些模板都，太！复！杂！了！！！！

直接打击了我99%的学习积极性。

直到我找到了这一款极其简单，只有一个html页面和css的个人博客模板。

麻雀虽小，五脏俱全。

基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。

简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。

界面看起来是这个样子的。

虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。代码也很简单。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。

这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。

下载地址在这里↓↓↓↓↓↓

https://download.csdn.net/download/qqhxmdq/88990921

代码我就全贴到这儿了，大家可以看一看。

<!DOCTYPE html>

<html>
  <head>
    <title>Web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Web site" />
    <meta name="description" content="Site description here" />
    <meta name="keywords" content="keywords here" />
    <meta name="language" content="en" />
    <meta name="subject" content="Site subject here" />
    <meta name="robots" content="All" />
    <meta name="copyright" content="Your company" />
    <meta name="abstract" content="Site description here" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
  </head>
  <body> 
    <div id="wrapper"> 
      <div id="bg"> 
        <div id="header"></div>  
        <div id="page"> 
          <div id="container"> 
            <!-- banner -->  
            <div id="banner"></div>  
            <!-- end banner -->  
            <!-- horizontal navigation -->  
            <div id="nav1"> 
              <ul>
                <li id="current" style="border:none">
                  <a href="#" shape="rect">Home</a>
                </li>
                <li>
                  <a href="#" shape="rect">Products</a>
                </li>
                <li>
                  <a href="#" shape="rect">Services</a>
                </li>
                <li>
                  <a href="#" shape="rect">News</a>
                </li>
                <li>
                  <a href="#" shape="rect">About</a>
                </li>
              </ul> 
            </div>  
            <!-- end horizontal navigation -->  
            <!--  content -->  
            <div id="content"> 
              <div id="center"> 
                <div id="welcome"> 
                  <h3>LICENSE</h3>  
                  <p>This template is free. You are free to use it, share it, redistribute it, modify it in any way you want as long as you 
                    <strong>keep a link back to doTemplate Website</strong> in the footer. You can remove this link by  
                    <a href="http://www.xxxx.com/" target="_blank" title="xxxx">xxxx</a> <a href="http://xxxx.com" target="_blank">xxxx</a>.
                  </p>  
                  <h1>Title 1</h1>  
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>  
                  <div> 
                    <img src="images/woman-2.jpg" style="float:left;margin:0 50px 25px 0;" />  
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> 
                  </div>  
                  <h2>Title 2</h2>  
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>  
                  <h3>Title 3</h3>  
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>  
                  <p style="clear:both" /> 
                </div> 
              </div>  
              <div id="right"> 
                <div id="sidebar"> 
                  <h3>Categories</h3>  
                  <ul class="vmenu">
                    <li>
                      <a href="#" shape="rect">Category 1</a>
                    </li>
                    <li>
                      <a href="#" shape="rect">Category 2</a>
                    </li>
                    <li>
                      <a href="#" shape="rect">Category 3</a>
                    </li>
                    <li>
                      <a href="#" shape="rect">Category 4</a>
                    </li>
                    <li>
                      <a href="#" shape="rect">Category 5</a>
                    </li>
                  </ul>  
                  <h3 style="margin-top:40px">News</h3>  
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>  
                  <div style="font-weight:bold;margin-top:20px">Call us : 00-123-456-789</div>  
                  <div style="text-align:center;margin:20px 0"> 
                    <img src="images/woman-3.jpg" /> 
                  </div> 
                </div> 
              </div>  
              <div class="clear" style="height:40px"></div> 
            </div>  
            <!-- end content --> 
          </div>  
          <!-- end container --> 
        </div>  
        <div id="footerWrapper"> 
          <div id="footer"> 
            <p style="padding-top:10px"> 
              <a href="http://www.xxxx.com" title="xxxx" target="_blank">xxxx</a> <a href="http://xxxx.com" target="_blank">xxxx</a> collect
            </p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </body>
</html>

简单的一批，十几分钟就搞清楚每块该怎么弄了。

下面是css




html {
	background: #CDF5F4;
	margin:0 0 0 -1px;
	padding:0;	
	overflow-Y: scroll;
}


body {
	padding:0;
	margin :0;
	display:table; 
	width:100%;	
}


					body {
	color:#656565;
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
}

p {
	letter-spacing: normal;
	line-height: 1.7em;
}

h1 {
	color:#1597A4;
	font-size:22px;
	margin:25px 0 10px 0;
	clear:both;
}


h2 {
	color:#1597A4;
	font-size:20px;
	margin:20px 0 10px 0;
	clear:both;
}


h3 {
	color:#1597A4;
	font-size:18px;
	margin:20px 0 5px 0;
	clear:both;
}



a:link, a:visited {
	color:#1597A4;
	text-decoration:none;
}


a:hover {
	color:#ffa500;
	text-decoration:underline;
}
	
					
#wrapper {
	background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
	margin:0 auto ;
	width:100%;
}

					body {
	background-color:#CDF5F4;
	background-image:url( images/css/body-bg.jpg );
	background-position:center top ;
	background-repeat:repeat-x;
}
	

#bg {
	margin:0 auto;
	padding:0;
	background:transparent ;
	background-image:url(images/css/hat.jpg);
 	background-repeat:no-repeat;	
	background-position: center top ;
}



					#header {
	margin: 0 auto;
	min-height:20px;
	height: 20px;
	width: 880px;
}
	

#page {
	background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
}


					

#container {
	margin:0 auto;
	width:880px;
}


#banner {
	margin: 0 auto;
	height:230px;
	width:100%;
}

					

#nav1 {
	height:40px;
	margin:0 auto ;
	text-align:center;
}

#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:40px;
	text-transform:uppercase;
	font-size:11px;
	font-family:Arial,sans-serif;
}


#nav1 ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url('images/css/hmenu.jpg') repeat-x top left;

}


#nav1 ul li a {
	display:block;
	float:left;
	color:#222222;
	text-decoration:none;
	padding:0px 50px ;
	line-height:40px;
	font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
	color:#ffffff;
	background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}


	

#content {
	width:868px;
	margin:0 auto ;
	text-align:left;
	min-height:800px;
}


#content p {
	text-align:justify;
}
	



#footerWrapper {
	margin:0 auto;
	height:130px;
	padding:0;
	background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}


#footer {
	margin:0 auto;
	padding:0;
	width:880px;
	height:90px;
}


					#footer {
	color:#FFFFFF;
	text-align:center;
}

#footer a:link, #footer a:visited {
	color:#FFFFFF;
}


#footer a:hover{
	color:#ffb500;
	text-decoration:none;
}

	
	
					
#right {
	width:200px;
	padding:10px 20px 20px 20px;
	float:left;
}


#center {
	width:588px;
	padding:10px 20px 20px 20px;
	float:left;
}

 
#content p {
	margin-top:10px;
	text-align:justify;
}


										
#sidebar ul.vmenu {
	list-style: none;
	text-align: left;
	margin: 7px 0px 8px 0px; 
	padding: 0;
	text-decoration: none;	
	border-top: 1px solid #d8d8f0;
}


#sidebar ul.vmenu li {
	list-style: none;
	padding: 4px 0 4px 0px;
	margin: 0 2px;	
	border-bottom: 1px solid #d8d8f0;
}



#sidebar ul.vmenu li a {
	text-decoration: none;
	color:#1860a8;
}


#sidebar ul.vmenu li a:hover {
	color:#ffa500;
}


#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }


			


a img {
	border:none;
} 


.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

css也不算长，好学得嘞！

嘻嘻(#^.^#)