学习前端时做的一个博客的模板psd2html代码

链接：

https://files.cnblogs.com/files/blogs/779648/%E5%8D%9A%E5%AE%A2.zip?t=1735182491&download=true

总结：

1、制作过程中会使用ps切片切出有些需要的图或者图标。

2、需要纯手写css，html代码，某些css代码可以参考ps图层的css复制。

3、可先按页面布局写好网页中容器【div,css】的包含结构，然后再用css定位和修饰。

4、如果要精确还原设计，还需要测量设计稿元素的尺寸和位置，并针对html页面宽度等比例计算。

5、定位元素大致有3类，1position定位，2float定位，3display定位。其中display定位比较重要的类型有flex和grid。

6、学习了psd2html之后就可以使用vue，react，angular这一类的框架了。这一类框架相对好学一些。

 

博客详情页的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博文</title>
    <link href="./common.css" rel="stylesheet">
    <style>
        .content{
            position: relative;
            top:30px;
        }
        .content .leftcontent{
            width: 68%;
            position: relative;
            float: left;
            left: 136.36875px;
            border: 0px solid #000033;
        }
        .content .leftcontent .article{

        }
        .content .leftcontent .article img{
            width: 100%;
            height: auto;
        }
        .content .leftcontent .article .title{
            font-size: 14.4675px;
            font-family: "Novecentowide";
            color: rgb(102, 98, 98);
            font-weight: bold;
            line-height: 1;
            text-align: left;
            margin: 25px 0px;
        }
        .content .leftcontent .article .menus{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .content .leftcontent .article .menus .menu1{
            background-image: url("./images/menu1.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 8px 15px 5px 40px;
            font-size: 14px;
            font-family: "Novecentowide";
            color: rgb(155, 153, 153);
            font-weight: bold;
            line-height: 1.714;
            text-align: left;
            display: block;
            margin-right: 25px;
        }
        .content .leftcontent .article .menus .menu2{
            background-image: url("./images/menu2.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 8px 15px 5px 40px;
            font-size: 14px;
            font-family: "Novecentowide";
            color: rgb(155, 153, 153);
            font-weight: bold;
            line-height: 1.714;
            text-align: left;
            display: block;
            margin-right: 25px;
        }
        .content .leftcontent .article .menus .menu3{
            background-image: url("./images/menu3.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 8px 15px 5px 40px;
            font-size: 14px;
            font-family: "Novecentowide";
            color: rgb(155, 153, 153);
            font-weight: bold;
            line-height: 1.714;
            text-align: left;
            display: block;
            margin-right: 25px;
        }
        .content .leftcontent .article .menus .menu4{
            background-image: url("./images/menu4.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 8px 15px 5px 40px;
            font-size: 14px;
            font-family: "Novecentowide";
            color: rgb(155, 153, 153);
            font-weight: bold;
            line-height: 1.714;
            text-align: left;
            display: block;
            margin-right: 25px;
        }
        .content .leftcontent .article .jianjie{
            font-size: 11.38px;
            font-family: "HelveticaNeue";
            color: rgb(155, 153, 153);
            line-height: 1.5;
            text-align: left;
            margin: 25px 0px;
        }
        .content .leftcontent .line{
            background-color: rgb(204, 204, 204);
            margin-bottom: 25px;
            height: 1px;
            width: auto;
        }
        .content .leftcontent .shares{
            margin: 40px 0px;
        }
        .content .leftcontent .shares .share{
            padding: 10px 10px 10px 0px;
            margin-right: 5px;
        }
        .content .leftcontent .shares .share .num{
            background-image: url("./images/sharenum.png");
            background-repeat: no-repeat;
            padding: 9px 20px;
            position: relative;
            bottom: 4px;

            font-size: 14px;
            font-family: "HelveticaNeue";
            color: rgb(155, 153, 153);
            line-height: 1.571;
            text-align: center;
        }
        .content .leftcontent .comments{
            margin: 40px 0px;
            position: relative;
            left: 0px;
            padding: 5px;
        }
        .content .leftcontent .comments h3{
            font-size: 16px;
            font-family: "Novecentowide";
            color: rgb(99, 101, 102);
            font-weight: bold;
            line-height: 1.333;
            margin-bottom: 5px;
        }
        .content .leftcontent .comments .head{
        }
        .content .leftcontent .comments .name{
            font-size: 14px;
            font-family: "HelveticaNeue";
            color: rgb(102, 98, 98);
            font-weight: bold;
            line-height: 1.25;
            text-align: left;
            position: absolute;
            left: 65px;
        }
        .content .leftcontent .comments .shijian{
            font-size: 12px;
            font-family: "HelveticaNeue";
            color: rgb(155, 153, 153);
            line-height: 1.429;
            text-align: left;
            position: absolute;
            right: 0px;
        }
        .content .leftcontent .comments .content{
            font-size: 12px;
            font-family: "HelveticaNeue";
            color: rgb(155, 153, 153);
            line-height: 1.5;
            text-align: left;
            width: 637px;
            height: 40px;
            position: absolute;
            left: 65px;
            top: 85px;
        }
        .content .leftcontent .addcomment{
            margin: 0px 0px 40px 0px;
            position: relative;
            left: 0px;
            padding: 5px;
        }
        .content .leftcontent .addcomment h3{
            font-size: 16px;
            font-family: "Novecentowide";
            color: rgb(99, 101, 102);
            font-weight: bold;
            line-height: 1.333;
            margin-bottom: 5px;
        }
        .content .leftcontent .addcomment input[type="text"]{
            background-color: rgb(239, 239, 239);
            width: 350px;
            height: 40px;
            margin-bottom: 10px;
            border:none;
            -webkit-appearance:none;
        }
        .content .leftcontent .addcomment .title{
            font-size: 12px;
            font-family: "Novecentowide";
            color: rgb(99, 101, 102);
            font-weight: bold;
            line-height: 1.571;
            text-align: left;
        }
        .content .leftcontent .addcomment .content{
            font-size: 12px;
            font-family: "HelveticaNeue";
            color: rgb(155, 153, 153);
            line-height: 1.571;
            text-align: left;
            width: 137px;
            height: 13px;
        }

        .content .leftcontent .addcomment .name{
            position: relative;
        }
        .content .leftcontent .addcomment .name .input{
            position: relative;
            top: 0px;
        }
        .content .leftcontent .addcomment .name .title{
            position: relative;
            top: -8px;
            left : 10px;
        }
        .content .leftcontent .addcomment .name .content{
            position: relative;
            top: 8px;
            left: -29px;
            margin-top: 15px;
        }
        .content .leftcontent .addcomment .email{
            position: relative;
        }
        .content .leftcontent .addcomment .email .input{
            position: relative;
            top: 0px;
        }
        .content .leftcontent .addcomment .email .title{
            position: relative;
            top: -8px;
            left : 10px;
        }
        .content .leftcontent .addcomment .email .content{
            position: relative;
            top: 8px;
            left: -29px;
            margin-top: 15px;
        }
        .content .leftcontent .addcomment .website{
            position: relative;
        }
        .content .leftcontent .addcomment .website .input{
            position: relative;
            top: 0px;
        }
        .content .leftcontent .addcomment .website .title{
            position: relative;
            top: -8px;
            left : 10px;
        }
        .content .leftcontent .addcomment .website .content{
            position: relative;
            top: 8px;
            left: -20px;
            margin-top: 15px;
        }
        .content .leftcontent .addcomment .content{
            position: relative;
            top: 5px;
            height: 150px;
        }
        .content .leftcontent .addcomment .content textarea{
            position: relative;
            background-color: rgb(239, 239, 239);
            position: absolute;
            width: 750px;
            height: 150px;
            margin-bottom: 15px;
            border: 0px;
        }
        .content .leftcontent .addcomment .addbutton{
            position: relative;
            top: 30px;
        }
        .content .leftcontent .addcomment .addbutton input{
            background-color: rgb(135, 182, 114);
            width: 140px;
            height: 40px;
            border: 0px;

            font-size: 14px;
            font-family: "Novecentowide";
            color: rgb(255, 255, 255);
            font-weight: bold;
            text-transform: uppercase;
            line-height: 1.286;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="header">
    <span class="logo">徐小波的博客</span>
    <span class="links">
            <span class="twitter"><img src="./images/twitter.png"></span>
            <span class="facebook"><img src="./images/facebook.png"></span>
            <span class="rss"><img src="./images/rss.png"></span>
        </span>
    <div class="line"></div>
    <ul class="menus">
        <li><a href="./index.html">首页</a></li>
        <li><a href="./blog.html" class="active">博文</a></li>
        <li><a href="./photos.html">相册</a></li>
        <li><a href="./archive.html">存档</a></li>
        <li><a href="./contact.html">联系我</a></li>
        <li><a href="./about.html">关于我</a></li>
    </ul>
    <span class="search"><img src="./images/search.png"></span>
</div>
<div class="banner"><span class="title">博文</span></div>
<div class="content">
    <div class="leftcontent">
        <div class="article">
            <div class="img"><img src="./images/img001.png"></div>
            <div class="title">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</div>
            <div class="menus">
                <span class="menu1">2024-12-15</span>
                <span class="menu2">徐小波</span>
                <span class="menu3">前端</span>
                <span class="menu4">2 评论</span>
            </div>
            <div class="jianjie">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
        <div class="line"></div>
        <div class="shares">
            <span class="share">
                <img src="./images/twitter3.png">
                <span class="num">32</span>
            </span>
            <span class="share">
                <img src="./images/facebook3.png">
                <span class="num">32</span>
            </span>
            <span class="share">
                <img src="./images/pinit3.png">
                <span class="num">32</span>
            </span>
        </div>
        <div class="comments">
            <h3>评论</h3>
            <div class="line"></div>
            <span class="head"><img src="./images/head1.png"></span>
            <span class="name">张光娟</span>
            <span class="shijian">2024-12-15 12:23:11</span>
            <span class="content">你做的这个看起来还挺好的呀，向你学习。</span>
        </div>
        <div class="addcomment">
            <h3>添加评论</h3>
            <div class="line"></div>
            <div class="name">
                <span class="input"><input type="text"></span>
                <span class="title">姓名 <font color="red">*</font></span>
                <span class="content">填写您的姓名</span>
            </div>
            <div class="email">
                <span class="input"><input type="text"></span>
                <span class="title">邮箱 <font color="red">*</font></span>
                <span class="content">填写您的邮箱</span>
            </div>
            <div class="website">
                <span class="input"><input type="text"></span>
                <span class="title">网站</span>
                <span class="content">填写你的网址，博客，或者个人站点地址</span>
            </div>
            <div class="content">
                <span class="input"><textarea></textarea></span>
            </div>
            <div class="addbutton">
                <input type="button" value="添加评论">
            </div>
        </div>
    </div>
    <div class="rightmenu">
        <div class="hots">
            <h3>热门文章</h3>
            <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 class="cats">
            <h3>文章分类</h3>
            <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 class="archives">
            <h3>存档</h3>
            <ul>
                <li><a href="#">2024-12</a></li>
                <li><a href="#">2024-11</a></li>
                <li><a href="#">2024-10</a></li>
                <li><a href="#">2024-09</a></li>
                <li><a href="#">2024-08</a></li>
            </ul>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<div class="footer">
    <span class="logo">徐小波的博客</span>
    <span class="text">我是一个开发，目前在学习前端的知识。最近我学着使用Photoshop切图，并且手写css在制作页面，感觉很有意思。</span>
    <span class="links">
            <span class="twitter"><img src="./images/twitter2.png"></span>
            <span class="facebook"><img src="./images/facebook2.png"></span>
            <span class="rss"><img src="./images/rss2.png"></span>
        </span>
    <span class="contact">
            <h3>联系我</h3>
            <div class="addr">北京市朝阳区建国路1号院</div>
            <div class="email">xuxiaobovip@126.com</div>
            <div class="mobile">13810813621</div>
        </span>
    <span class="quicklinks">
            <h3>快速链接</h3>
            <ul>
                <li><a href="./index.html">首页</a></li>
                <li><a href="./blog.html">博文</a></li>
                <li><a href="./photos.html">相册</a></li>
                <li><a href="./archive.html">存档</a></li>
                <li><a href="./contact.html">联系我</a></li>
                <li><a href="./about.html">关于我</a></li>
            </ul>
        </span>
    <span class="newsletter">
            <h3>订阅</h3>
            <div class="text">输入您的邮件，我将会在新文章产生时通知您。</div>
            <div class="dingyue">
                <input type="text" placeholder="Email">
                <input type="button" value="OK">
            </div>
        </span>
    <div class="line"></div>
    <span class="left">版权所有 2024 xuxiaobovip. 保留所有权利。</span>
    <span class="right">关于我们  /  隐私保护  /  联系我们</span>
</div>

</body>
<script>
    console.log('宽：'+document.documentElement.clientWidth);
    console.log('高：'+document.documentElement.clientHeight);
    console.log('比例：'+document.documentElement.clientWidth / 1600); //1600-psd宽度
    //0.949375
</script>
</html>

 

html效果：

 

 

 

 

 

 

 

设计图：

 

 

 

 

 

 

posted @ 2024-12-26 11:26  河北大学-徐小波  阅读(7)  评论(0)  编辑  收藏  举报