求一个简单的个人网页html模板

html-css010

求一个简单的个人网页html模板,第1张

这种模板很多的,百度打开一个网页右键源代码就能找到了。

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon">

<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon">

<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon">

<title>{dede:global.cfg_webname/}</title>

<meta name="keywords" content="{dede:global.cfg_keywords/}">

<meta name="description" content="{dede:global.cfg_description/}">

<link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"></script>

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"></script>

<style type="text/css">

html,

body {

margin: 0

padding: 0

}

.iw_poi_title {

color: #CC5522

font-size: 14px

font-weight: bold

overflow: hidden

padding-right: 13px

white-space: nowrap

}

.iw_poi_content {

font: 12px arial, sans-serif

overflow: visible

padding-top: 4px

white-space: -moz-pre-wrap

word-wrap: break-word

}

</style>

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"></script>

<script>

jQuery(document).ready(function() {

jQuery('#openSidebar').click(function() {

jQuery('.wrapper').toggleClass('openNav')

})

jQuery('#menu a').click(function() {

jQuery('.wrapper').removeClass('openNav')

})

})

</script>

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"></script><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"></script><link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css">

<style type="text/css">

html,

body,

wrapper {

height: 100%

}

</style>

</head>

<body>

<div class="wrapper">

<div class="sidebar">

<div class="clearfix k1120">

<div class="navBox" id="openSidebar">

<a href="javascript:void(0)" class="navOpen"></a>

</div>

<div id="menu">

<ul class="clearfix">

<li><a href="#home" class="nav_home current"><span>首页<br /><b>Home</b></span></a>

</li>

<li><a href="#services" class="nav_services"><span>服务范围<br /><b>Services</b></span></a>

</li>

<li><a href="#case" class="nav_case"><span>案例展示<br /><b>Case</b></span></a>

</li>

<li><a href="#about" class="nav_about"><span>关于我们<br /><b>About us</b></span></a>

</li>

<li><a href="#news" class="nav_news"><span>新闻动态<br /><b>News</b></span></a>

</li>

<li><a href="#contact" class="nav_contact"><span>联系我们<br /><b>Contact us</b></span></a>

</li>

</ul>

</div>

</div>

</div>

<div class="pageMain">

<div id="header">

<div class="k1120 clearfix"><a href="{dede:global.cfg_basehost/}" id="logo">logo</a>

</div>

</div>

<div id="home" class="scrol-page">

<div class="banner">

<div class="b_1" style="background-position: 50% 0px">

<div class="k1120 clearfix">

<div class="b_pic">

<div class="mac" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/mac.png">

</div>

<div class="iphone" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/iphone.png">

</div>

<div class="ipad" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/ipad.png">

</div>

</div>

<div class="b_text" style="margin-top: 0pxopacity: 1">

{dede:global.cfg_ggg/}

</div>

</div>

</div>

</div>

<div class="banner">

如果要把html转成cms模板,那是仿站的过程,比直接从千站素材下载模板复杂的多。原理大致为对html网页根据CMS系统程序的不同,对模板标签的定义改造:

比如有些模板用${news[1,2,3,3]}有的类似 {FS_新闻列表}

等形式,楼主应该根据CMS程序的使用说明,了解模板标签,在你的页面中插入相应的标签后,将代码复制到程序模板目录或后台..

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>卧龙控股</title>

<style type="text/css">

    @charset "utf-8"

/* CSS Document */

*{margin:0padding:0font-family:"微软雅黑"}

ul,ol,li{list-style:none}

a,u{text-decoration:none}

#top,#nav,#banner,#news,#wlsc,#yqlink,#bottom{margin:0 auto}

/*-top-*/

#top{width:1000pxheight:100px}

#logo{width:732pxheight:59pxfloat:leftpadding:41px 0 0 21px}

img{border:0}

#sear{width:247pxheight:61pxfloat:leftpadding-top:39px}

#search{height:26px line-height:26pxborder:1px solid #e5e5e5border-right:noneoutline:nonebackground: #f1f1f1float:leftcolor:#818181}

#fin{width:26pxheight:26pxline-height:26pxborder:nonebackground: #f1f1f1 url(../images/sear.jpg) no-repeat centerfloat:left}

.ffin{height:26pxwidth: 26pxborder:1px solid #e5e5e5float:leftborder-left:none}

/*-nav-*/

#nav{width:1000pxheight:59pxbackground:#000}

#nav ul li{width:119px height:59pxline-height:59pxtext-align:centerborder-right:1px solid #484848float:left}

#tttt{border:0}

#nav a{color:#fff}

/*-banner-*/

#banner{width:1000pxheight:463px}

#news{width:1000pxheight:240px}

#news1{width:456pxheight:183pxfloat:leftpadding:36px 25px 22px 19pxfloat:left}

#news1 h2{font-size:18pxfont-weight:100color:#191919width:78pxmargin-bottom:22px}

#news1 ul{font-size:12pxwidth:452pxline-height:24px}

#news1 ul a{color:#5c5c5cwidth:300pxoverflow:hiddenwhite-space:nowrapfloat:lefttext-overflow:ellipsis}

#news1 ul span{float:rightpadding-right:28px}

#news1 ul li a{background:url(../images/dian.jpg) no-repeat left centerpadding-left:14pxcolor:#929292}

#news2{width:240pxheight:240pxbackground:#f1f1f1float:left}

#news2 h2{font-size:18pxfont-weight:100color:#515151margin:36px 0 39px 25px}

#news2 h3{font-size:12pxcolor:#515151margin:0 0 13px 25pxline-height:12px}

#news2 h4{font-size:11pxcolor:#515151margin:0 0 27px 25pxline-height:12px}

#news2 p{width:190pxfont-size:11pxfont-weight:100color:#8c8c8cmargin:0 0 0 25pxline-height:20px}

#news3{width:260pxheight:240pxbackground:url(../images/hua.jpg) no-repeat #fbfbfb 164px 121pxfloat:left}

#news3 h2{font-size:18pxfont-weight:100color:#222padding:36px 0 21px 25px}

#news3 p{width:180pxfont-size:12pxfont-weight:100line-height:24pxpadding:0 25px 0 25pxcolor:#595959}

#news3 div{padding:56px 0 0 25px}

/*-wlsc-*/

#wlsc{width:1000pxheight:276px}

#wlsc dl{width:230pxpadding-left:20pxfloat:left}

.miao{width:204pxfont-size:12pxline-height:2emcolor:#575757}

#wlsc h2{font-size:18pxcolor:#212121margin:30px 0 17px 23pxline-height:18pxfont-weight:100}

/*-yqlink-*/

#yqlink{width:1000pxheight:249pxbackground:#e5e5e5}

#yqlink1{width:480pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink1 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:432pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink1 ul li{font-size:12pxline-height:24pxbackground:url(../images/dayu.jpg) no-repeat 0 center padding-left:10px}

#yqlink1 ul{float:leftwidth:150pxheight:200pxpadding-top:10px}

#yqlink1 a{color:#8c8c8c}

#yqlink2{width:180pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink2 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:160pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink2 ul li{font-size:12pxline-height:24pxbackground:url(../images/dayu.jpg) no-repeat 0 center padding-left:10px}

#yqlink2 a{color:#8c8c8c}

#yqlink2 ul{padding-left:10pxpadding-top:10px}

#yqlink3{width:280pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink3 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:240pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink3 img{margin:15px 0 0 20px}

#bzottom{width:1000pxheight:83px}

#bot1{width:361pxheight:58pxmargin:24px 0 1px 21pxfloat:left}

.shu{font-size:12pxpadding-right:7pxborder-right:1px solid #7e7e7ecolor:#888}

.shu1{font-size:12pxpadding-right:7pxcolor:#888}

#bot2{width:610pxheight:83pxfloat:leftclear:right}

#bot2 p{font-size:12pxcolor:#888margin-top:27px}

</style>

</head>

<body>

<div id="top">

  <div id="logo"> 

    <a href="#" alt="" title=""><img src="images/logo.jpg" /></a></div>

  <div id="sear">

    <form name="" method="" action="">

     

      <input type="text" value="SEARCH..." id="search"/>

      <div class="ffin"><input type="submit" value="" id="fin"/></div>

    </form>

  </div>

</div>

<div id="nav">

  <ul>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li><a href="#">集团介绍</a></li>

    <li id="tttt"><a href="#">集团介绍</a></li>

  </ul>

</div>

<div id="banner"><a href="#"><img src="images/banner.jpg" alt="" title="" /></a></div>

<div id="news">

     <div id="news1">

        <h2>新闻资讯</h2>

        <ul>

            <li><a href="#">新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

            <li><a href="#">新闻条新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

            <li><a href="#">新闻条新闻条新闻条新新闻条条新闻条新闻条新新闻条新闻条新闻条闻条</a><span>2016-12-02</span></li>

            <li><a href="#">新闻条新闻条新闻条新新闻条新条新闻条新闻条新闻条新闻条新闻条闻条</a><span>2016-12-02</span></li>

            <li><a href="#">新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

            <li><a href="#">新闻条新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新条</a><span>2016-12-02</span></li>

        </ul>

    </div>

    <div id="news2">

        <h2>卧龙介绍</h2>

        <h3>公司成立于1984年,</h3>

        <h4>经过近30年的发展</h4>

        <p>公司怎么样怎么样怎么样怎么样怎么样怎么样怎么样</p>

    </div>

    <div id="news3">

        <h2>人才招聘</h2>

        <p>我们要招人我们要招人我们要招人我们要招人</p>

        <div><a href="#"><img src="images/more.jpg" alt="" title=""></a></div>

    </div>

</div>

<div id="wlsc">

    <h2>卧龙市场</h2>

    <dl>

        <dt><img src="images/wlsc1.jpg" alt="" title=""></dt>

          <dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

            

    </dl>

    <dl>

        <dt><img src="images/wlsc2.jpg" alt="" title=""></dt>

          <dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

            

    </dl>

    <dl>

        <dt><img src="images/wlsc3.jpg" alt="" title=""></dt>

          <dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

            

    </dl>

    <dl>

        <dt><img src="images/wlsc4.jpg" alt="" title=""></dt>

          <dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

            

    </dl>

</div>

<div id="yqlink">

<div id="yqlink1">

        <h2>产品中心</h2>

        <ul>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

        </ul>

        <ul>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

        </ul>

        <ul>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

        </ul>

</div>

<div id="yqlink2">

    <h2>技术研发</h2>

        <ul>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

            <li><a href="#">我是链接</a></li>

        </ul>

</div>

<div id="yqlink3">

    <h2>营销网络</h2>

    <a href="#"><img src="images/ditu.jpg" alt="" title="" />

    </a>

</div>

</div>

<div id="bottom">

    <div id="bot1">

        <a href="#" class="shu">网站地图</a>

        <a href="#" class="shu">联系我们</a>

        <a href="#" class="shu">关注卧龙</a>

        <a href="#" class="shu1">采购系统入口</a>

        

    </div>

    <div id="bot2">

        <p>COPYRIGHT&COPY2013卧龙控股集团&nbsp版权所有&nbsp浙ICP备06005901号&nbsp技术支持:博采互动</p>

    </div>

</div>

</body>

</html>

你把文字和图片改一下就可以了