一个简单好看的html模板

锁住子锁不住

已于 2024-04-03 16:51:07 修改

阅读量387

点赞数 3

分类专栏：单页html模板文章标签： javascript 模板学习 html 前端个人博客

于 2024-04-03 16:50:04 首次发布

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

版权

单页html模板专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文指导零基础者通过学习一个只有一个HTML页面和CSS的极简个人博客模板，快速入门并掌握基础布局和功能实现，提供了一份适合初学者的教程和资源链接。

摘要由CSDN通过智能技术生成

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

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

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

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

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

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

麻雀虽小，五脏俱全。

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Photo Blog Template - free CSS layout</title>

<meta name="keywords" content="photo blog template, free website layout, CSS, download HTML" />

<meta name="description" content="Photo Blog Template, Free xHTML/CSS Layout, Free Website Template from xxxx.com" />

<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="templatemo_container">

  <div id="templatemo_left_section">

   <div id="templatemo_left_header">

     <div id="templatemo_left_title">PHOTO BLOG TEMPLATE</div>

     <div id="templatemo_left_slogan">YOUR SLOGAN TEXT GOES HERE ...</div>

     <div id="templatemo_latest"><a href="#"> LATEST PHOTO GALLERY</a></div>

   </div>

   <div id="templatemo_left_menu">

     <div class="templatemo_topmenu">

       <ul>
         <li><a href="#" class="current">MAIN PAGE</a></li>
         <li><a href="#">ABOUT US</a> </li>
         <li><a href="#">GALLERIES</a></li>
         <li><a href="#">BLOG</a></li>
         <li><a href="#">CONTACT</a></li>
       </ul>

      </div>

   </div>

   <div id="templatemo_left_content">

     <h1>WELCOME TO OUR WEBSITE</h1>

     <p>This is a free CSS template provided by <a href="http://www.xxxx.com" target="_parent"><strong>xxxx.com</strong></a>. You may download, modify and apply this CSS layout in your websites.</p>

     <p>Quisque in diam a justo condimentum molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem. </p>

     <p>Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio. Maecenas venenatis metus eu est. In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. </p>

     <h3>BEST PHOTOS OF THIS WEEK</h3>

     <p><img src="images/templatemo_photo1.jpg" alt="xxxx.com" width="427" height="113" /></p>

     <h3>LATEST NEWS</h3>

     <div class="templatemo_content_left"><strong>POST DATE: 10-10-2021<br />
     </strong>

      Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque.<br />
      <br />
      Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. <a href="#"><strong>MORE</strong></a></div>

     <div class="templatemo_content_right"><strong>POST DATE: 05-10-2021<br />
     </strong>

      Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. <br />
      <br />
      Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Praesent vel diam. Cras sed leo tempor neque. <a href="#"><strong>MORE</strong></a></div>

   </div>

  </div>

  <div id="templatemo_right_section">

    <div id="templatemo_right_top"></div>

    <div id="templatemo_right_search">

      <form id="form1" name="form1" method="post" action="">

        <label>

        <input type="text" name="search_item" id="search_item" />

        </label>

            <label>

            <input type="submit" name="search_btn" id="search_btn" value="Search" />

        </label>

      </form>

    </div>

    <div id="templatemo_memberlog">

      <h2>MEMBER LOG IN</h2>

      <form id="form2" name="form2" method="post" action="">

		<strong>User Name</strong>


          <input type="text" name="user_name" id="user_name" />


            <br />

        <strong>Password</strong><input type="text" name="password" id="password" />


        <input type="submit" name="login" id="login" value="Login" />


        <p><strong>New Member?</strong>

        <a href="#"><strong>Register Now!</strong></a>

        </p>

      </form>

      </div>

    <div id="templatemo_category">
      <h2>CATEGORIES</h2>

      <div class="templatemo_rightmenu">

        <ul>

          <li><a href="#">New Categories</a></li>

          <li> <a href="#">Best of 2020/2021</a></li>

          <li> <a href="#">Creatures</a></li>

          <li> <a href="#">Buildings</a></li>

          <li> <a href="#">Exhibitions</a></li>

          <li> <a href="#">Nature</a></li>

        </ul>

      </div>

    </div>

    <div id="templatemo_contact"><h2>QUICK CONTACT</h2>

      <p>Tel: 010-100-1001<br />

        Fax: 020-200-2002<br />

        Email: info [at] xxxx.com</p>

      <p><a href="http://validator.w3.org/check?uri=referer"><img height="31" alt="Valid XHTML 1.0 Transitional" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS!" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" vspace="8" border="0" /></a></p>

    </div>

  </div>

  <div id="templatemo_footer">Copyright ©  Your Company Name | from <a href="http://www.xxxx.com" target="_parent" title="Free Web Templates">xxxx.com</a></div>

</div>
<!--  from www.xxxx.com  -->
</body>
</html>

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

下面是css

/*
 
*/

body {

	margin: 0;

	padding:0;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	line-height: 1.5em;

	color: #3e3e3e;

	background: #e2e2e2 url(images/templatemo_page_bg.jpg) repeat-x  center top;

	width: 100%;

	display: table;

}

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

a:active, a:hover { color: #009900; text-decoration: underline; }


h1 {

	font-size: 20px;

	font-weight: bold;

	color: #a30000;

}

h2 {

	font-size: 14px;

	font-weight: bold;

	color: #cb1a1a;

	margin-left: 30px;

	width: 200px;

	border-bottom: dashed 1px #999999;

}

h3 {

	font-size: 14px;

	font-weight: bold;

	color: #f67400;

}

#templatemo_container {

	width: 805px;

	margin: auto;

	background:url(images/templatemo_container_bg.jpg) repeat-y;

}

#templatemo_left_section {

	float: left;

	width: 500px;

}

#templatemo_right_section {

	float: left;

	width: 305px;

}



#templatemo_left_header {

	float: left;

	width: 500px;

	height: 216px;

	background: url(images/templatemo_left_header.jpg) no-repeat;

}

#templatemo_left_title {

	padding-top: 30px;

	color: #FFFFFF;

	font-size: 30px;

	font-weight: bold;

	height: 45px;

	width: 450px;

	line-height: 1.6em;

	padding-left: 50px;

}

#templatemo_left_slogan {

	float: left;

	height: 35px;

	width: 450px;

	color:#ffe9ba;

	padding-left: 50px;

	font-weight: bold;

}

#templatemo_latest {

	float: left;

	margin: 40px 0px 0px 130px;

	width: 300px;

	color: #FFFFFF;

	font-size: 16px;

	font-weight: bold;

}

#templatemo_latest a {

	color: #ffffff;

}

#templatemo_left_menu {

	float: left;

	width: 500px;

	height: 73px;

	background: url(images/templatemo_left_menu.jpg) no-repeat;

}

.templatemo_topmenu{

	float: left;

	margin: 3px 0px 0px 20px;

}

.templatemo_topmenu ul {

	list-style: none;

	padding: 0px;

	margin: 0px;

}



.templatemo_topmenu li{

	display: inline;

}



.templatemo_topmenu li a{

	float: left;

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

	text-align: center;

	color: #fff;

	width: 90px;

	height: 31px;

	margin-left: 0px;

	padding-top: 11px;

}

.templatemo_topmenu li a:hover ,.templatemo_topmenu li .current{

	background: url(images/templatemo_hover.jpg) repeat-x;

}

#templatemo_left_content {

	float: left;

	width: 430px;

	margin: 0px 0px 20px 50px;

	text-align: justify;

}

.templatemo_content_left {

	float: left;

	width: 200px;



}

.templatemo_content_right {

	float: right;

	width: 200px;

}

#templatemo_right_top {

	float: left;

	width: 305px;

	height: 216px;

	background: url(images/templatemo_right_top.jpg) no-repeat;

}

#templatemo_right_search {

	float: left;

	width: 305px;

	height: 73px;

	background: url(images/templatemo_search_menu.jpg) no-repeat;

}

#templatemo_memberlog {

	float: left;

	width: 305px;

}

#templatemo_category {

	float: left;

	width: 305px;

	margin-top: 20px;

}

.templatemo_rightmenu {

	float: left;

	margin-top: 0px;

	font-size: 13px;

	font-weight: bold;

}

.templatemo_rightmenu ul {

	list-style-type: none;

}

.templatemo_rightmenu li a {

	display: block;

	width: 171px;

	height: 23px;

	font-size: 11px;

	color: #a30000;

	margin-top: 2px;

	padding-left: 40px;

	padding-top: 5px;

	background: url(images/templatemo_button.png) no-repeat;

}

/*
CSS Credit: http://www.moobnn.com/
*/

.templatemo_rightmenu li a:hover{

	color: #000;

}

#templatemo_contact {

	float: left;

	width: 305px;

}

#templatemo_contact p {

	padding-left: 40px;

	font-weight: bold;

}

#templatemo_footer {

	clear: both;

	width: 770px;

	height: 28px;

	color: #FFFFFF;

	text-align: center;

	font-weight: bold;

	margin-left: 18px;

	margin-top: 30px;

	padding-top: 20px;

	background: url(images/templatemo_footer_bg.jpg) repeat-x;

}

#form1 {

	float:left;

	margin-top: 0px;

}

#search_item {

	width: 120px;

	margin: 10px 0px 0px 40px;

	font-size: 11px;

}

#search_btn {

	font-size: 11px;

	background:#FFFFFF;

	border: 0px;

	margin-left: 5px;

}

#form2 {

	margin-left: 30px;

}

#user_name {

	width: 100px;

	font-size: 10px;

	margin-left: 10px;

}

#password {

	width: 100px;

	font-size: 10px;

	margin-left: 17px;

}

#login {

	font-size: 10px;

}

#newmember {

	font-size: 10px;

	margin-left: 20px;

}

css也不算长，好学得嘞！

嘻嘻(#^.^#)

锁住子锁不住

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个简单好看的html模板

虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。但是这样也有个问题，那就是，那些模板都，太！简单的一批，十几分钟就搞清楚每块该怎么弄了。
复制链接

扫一扫