一个简单好看的html模板

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

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

那么,就找一个现成的模板学一学呗,毕竟我们是高贵的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也不算长,好学得嘞!

嘻嘻(#^.^#)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/515260.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

后端SpringBoot+Mybatis 查询订单数据表奇怪报错加一

排错过程&#xff1a; 看报错意思是SQL语句存在错误&#xff0c;然后使用图形化工具运行这个SQL语句 其实这里稍微细心想一下就能发现问题&#xff0c;但是当时没深入想&#xff0c;就觉得order表前加了数据库名字影响不大&#xff0c;所以感觉SQL语句是没问题的&#xff0c;然…

第十二篇【传奇开心果系列】Python自动化办公库技术点案例示例:深度解读Python自动化操作Word

传奇开心果系列博文 系列博文目录Python自动化办公库技术点案例示例系列 博文目录前言一、Python自动化操作Word介绍二、使用python-docx示例代码二、**使用win32com示例代码**三、使用comtypes示例代码四、使用docx-mailmerge示例代码五、基本操作示例代码六、高级操作示例代码…

讲讲你对数据结构-线性表了解多少?

线性表 - 数组和矩阵 当谈到线性表时&#xff0c;数组和矩阵是两种常见的数据结构。 数组&#xff08;Array&#xff09;&#xff1a; 数组是有序的元素集合&#xff0c;可以通过索引来访问和操作其中的元素。它是最简单、最基本的数据结构之一。数组的特点包括&#xff1a; …

不讲概念,讲实操,mysql 分表模糊查询、分页查询 及 merge 表的使用

1.Mysql merge合并表的要求 1.合并的分表必须是 MyISAM 引擎&#xff0c;MyISAN引擎是不支持事务的。2.Merge表只保证合表后数据唯一性&#xff0c;合表前的数据可能会存在重复。3.表的结构必须一致&#xff0c;包括索引、字段类型、引擎和字符集。4.删除 tb_member1 分表正确…

网络爬虫:爬取假数据

网络爬虫&#xff1a;爬取假数据 文章目录 网络爬虫&#xff1a;爬取假数据前言一、项目介绍&#xff1a;二、项目来源&#xff1a;三、架构图&#xff1a;&#xff08;流程图&#xff09;四、使用了什么技术&#xff1a;&#xff08;知识点&#xff09;五、结果示意图&#xf…

DXP学习001-原理图的全局编辑

目录 一&#xff0c;元件标注的全局编辑 1&#xff0c;元件的标注 1&#xff09;order of processing排序执行顺序 2&#xff09;※matching options匹配选项 3&#xff09;annotate schematic注释原理图 ① schematic sheet ②annotate scope 注释范围 ③order顺序…

SpringCloud Hystrix 服务熔断、服务降级防止服务雪崩

文章目录 SpringCloud Hystrix 熔断器、服务降级防止服务雪崩需求背景引入依赖启动类加Hystrix注解接口配置熔断常规配置超时断开错误率熔断请求数熔断限流 可配置项HystrixCommand.Setter参数Command Properties 服务降级 SpringCloud Hystrix 熔断器、服务降级防止服务雪崩 H…

详解设计模式:单例的进化之路

概念 单例模式(Singleton Pattern)是设计模式中一个重要的模式之一&#xff0c;是确保一个类在任何情况下都绝对只有一个实例。单例模式一般会屏蔽构造器&#xff0c;单例对象提供一个全局访问点&#xff0c;属于创建型模式。 根据初始化时间的不同&#xff0c;可以将单例模式…

SpringCloud - 如何本地调试不会注册到线上环境(Nacos)?

问题描述 有时候我们需要本地调试注册到 Nacos 上&#xff0c;但是会影响线上服务的 Feign 请求打到本地导致不通影响了线上业务。 原因分析 一般最传统的解决方案就是修改本地 bootstrap.yml 的 spring.cloud.nacos.discovery.namespace spring:application:name: app-serv…

c语言--枚举类型(声明、使用、优点)

目录 一、枚举类型的声明二、 枚举类型的优点三、 枚举类型的使用 一、枚举类型的声明 枚举顾名思义就是一一列举。 把可能的取值⼀⼀列举。 比如我们现实生活中&#xff1a; ⼀周的星期⼀到星期日是有限的7天&#xff0c;可以⼀⼀列举 性别有&#xff1a;男、女、保密&#x…

WordPress 6.5 “里贾纳”已经发布

WordPress 6.5 “里贾纳”已经发布&#xff0c;其灵感来自著名爵士小提琴家Regina Carter的多才多艺。雷吉娜是一位屡获殊荣的艺术家和著名的爵士乐教育家&#xff0c;以超越流派而闻名&#xff0c;她在古典音乐方面的技术基础和对爵士乐的深刻理解为她赢得了大胆超越小提琴所能…

YUM仓库和编译安装

目录 一.YUM仓库搭建 1.简介&#xff1a; 2.搭建思路&#xff1a; 3.实验&#xff1a;单机yum的创建 二.编译安装 1.简介 2.安装过程 3.实验&#xff1a;编译安装nginx 一.YUM仓库搭建 1.简介&#xff1a; yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红…

STL——vector容器基本使用与常用接口模拟实现

vector的介绍及使用 vector的介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…

【Apache Doris】周FAQ集锦:第 1 期

【Apache Doris】周FAQ集锦&#xff1a;第 1 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户和…

SD-WAN国际网络专线:高效、合规且可靠的跨境连接解决方案

在数字化时代&#xff0c;企业对跨境网络连接的需求日益增长。SD-WAN技术作为一种新兴的解决方案&#xff0c;正逐渐成为构建跨境网络连接的首选。本文将探讨SD-WAN国际网络专线的发展现状、合规性要求以及选择时需要考虑的关键因素。 SD-WAN技术&#xff1a;跨境网络连接的新…

STM32F407 FSMC并口读取AD7606

先贴一下最终效果图.这个是AD7606并口读取数据一个周期后的数据结果. 原始波形用示波器看是很平滑的. AD7606不知为何就会出现干扰, 我猜测可能是数字信号干扰导致的. 因为干扰的波形很有规律. 这种现象基本上可以排除是程序问题. 应该是干扰或者数字信号干扰,或者是数字和模拟…

MT3017 上色

思路&#xff1a;使用分治&#xff0c;在每个连续区域递归调用heng()和shu() #include <bits/stdc.h> using namespace std; int n, m; int h[5005];int shu(int l, int r) {return r - l 1; } int heng(int l, int r) {int hmin 0x3f3f3f3f;for (int i l; i < r;…

关于C#操作SQLite数据库的一些函数封装

主要功能&#xff1a;增删改查、自定义SQL执行、批量执行&#xff08;事务&#xff09;、防SQL注入、异常处理 1.NuGet中安装System.Data.SQLite 2.SQLiteHelper的封装&#xff1a; using System; using System.Collections.Generic; using System.Data.SQLite; using System.…

EDM邮件推广营销工具多少钱?

云衔科技&#xff0c;凭借专业的技术研发实力与丰富的行业经验&#xff0c;倾力打造了一款智能EDM&#xff08;Electronic Direct Mail&#xff09;邮件营销系统解决方案&#xff0c;以精准、高效、定制化的服务&#xff0c;为企业开启全新的营销之旅。至于价格&#xff0c;云衔…

计算机笔记(3)续20个

41.WWW浏览器和Web服务器都遵循http协议 42.NTSC制式30帧/s 44.三种制式电视&#xff1a;NTSC&#xff0c;PAL&#xff0c;SECAM 45.IP&#xff0c;子网掩码白话文简述&#xff1a; A类地址&#xff1a;取值范围0-127&#xff08;四段数字&#xff08;127.0.0.0&#xff09…