响应式布局的个人博客

最新推荐文章于 2024-03-22 15:20:31 发布

文科生的编程路

最新推荐文章于 2024-03-22 15:20:31 发布

阅读量251

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51053780/article/details/124789580

版权

希望你的喜欢。

文章目录

前言
一、个人博客的相关图片
二、相关代码
总结：

前言

这是本人去年的时候做的一个响应式布局的个人博客，主要是通过HTML5+CSS3完成的，非常适合不懂响应式布局的小白练手。

`提示：以下是本篇文章正文内容

一、个人博客的相关图片

在这里插入图片描述

二、相关代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
           }
       *{
           box-sizing: border-box;
       }
       body{
           font-family:Arial;
           padding:10px;
           background:#f1f1f1;
       }
       /* 头部标题 */
       .header{
           padding: 20px;
           text-align: center;
           background: white;
       }
       .header h1{
           font-size:50px;
       }
       /* 导航条 */
       .topnav{
           overflow:hidden;
           background-color: #333;
           padding: 12px;
       }
       /* 导航条链接 */
       .topnav a{
           float:left;
           display:block;
           color: white;
           text-decoration: none;
           margin-left:12px;
       }
       
       /* 链接颜色修改 */
       .topnav a:hover{
           background-color: #ddd;
           color:red;
       }
       /* 创建两列 */
       /* 左侧栏 */
       .leftcolumn{
         float:left;
         width:75%;
       }

       /* 右侧栏 */
       .rightcolumn{
           float:left;
           width:25%;
          background-color: #f1f1f1;
          padding-left:20px;
       }

       /* 图像部分 */
       .fakeimg{
           background-color: #aaa;
           width:100%;
           padding:0px;
       }
       .fakeimg1{
           background-color: #aaa;
           width:100%;
           padding:5px;

       }
       /* 文章卡片效果 */
       .card{
           background-color: white;
           padding: 20px;
           margin-top:20px;

       }
       .card1{
           background-color: white;
           padding: 20px;
           margin-top:20px;
           border: 2px solid wheat;
           border-radius: 10px;

       }
       /* 列后面清除浮动 */
       .row:after{
           content:"";
           display: table;
           clear: both;
       }
       /* 底部 */
       .footer{
           padding: 20px;
           text-align: center;
           background: #ddd;
           margin-top:20px;
       }

       /* 响应式布局-屏幕尺寸小于800px时,两侧布局改为上下布局 */
       @media screen and (max-width:800px) {
           .leftcolumn,.rightcolumn{
               width: 100%;
               padding: 0;
           }

       }
       /* 屏幕小于400px时，导航等布局改为上下布局 */
       @media  screen and (max-width:400px) {
           .topanav a{
               float: none;
               width:100%;
           }
       }
    </style>
</head>
<body>
    <!-- 网页标题 -->
    <div class="header">
        <h1>个人博客</h1>
        <p>欢迎来到我的世界</p>
        <p>作者:陈中辉</p>
    </div>
    <!-- 导航栏 -->
    <div class="topnav">
        <a href="#">我的信息</a>
        <a href="#">个人爱好</a>
        <a href="#">个人简历</a>
        <a href="#" style="float:right">个人主页</a>
    </div>
    <!-- 内容主体部分 -->
    <div class="row">
        <!-- 内容左部分 -->
        <div class="leftcolumn">
            <div class="card">
                <h2>我的编程之旅</h2>
                <h5>2021年9月4号</h5>
                <div class="fakeimg" style="height:200px">
                 <a href="#"><img src="../个人博客/imges/1.jfif" alt="tu" style="height: 200px;width: 100%;float: left;"></a>
                </div>
                <p>学的不仅仅是技术，更是梦想！</p>
                <p>对于行外人来说，编程写的是一堆如同天书的乱码，一眼望去，密密麻麻。单词和符号混杂，放眼望去，一会等于号，一会逗号，一会分号，还有中括号、小括号、大括号……奇奇怪怪，看着都头大。即便不会编程，可能也听认识的朋友介绍过：编程，一个标点符号都不能写错！这么死板的东西，你说是文学？！<br>秀的编程人员，知道代码是写给人看的。自己要看，后来者也要看。
                </p>
            </div>
            <div class="card">
                <h2>我的大数据之旅</h2>
                <h5>2021年9月4号</h5>
                <div class="fakeimg" style="height:200px">
                    <a href="#"><img src="../个人博客/imges/17.jfif" alt="大数据" style="height: 200px;width: 100%;float: left;"></a>
                </div>
                <p>数据也许也是一种生命！</p>
                <p>我是一名文科生，虽然选择了大数据的专业，但我并没有后悔。<br>反之我更喜欢编程，我不认为文科生就无法学好编程，尽管文科生的逻辑思维不如理科生，但文科生的记忆力也是理科生比不上的。<br>所以努力去学，即使比不上别人，我也不会因此而放弃，人都是有梦想的。大数据虽然难，但只要打好基础，一步一步的前进，总会学有所成的。</p>
            </div>
            <div class="card">
                <h2>我的大学生活</h2>
                <h5>2020年9月1日</h5>
                <div class="fakeimg" style="height:200px">
                    <a href="#"><img src="../个人博客/imges/5.jfif" alt="大数据" style="height: 200px;width: 100%;float: left;"></a>
                </div>
                <p>没有大学的生活是不完美的！</p>
                <p>在大学里,我过得很开心，我遇到来自五湖四海的同学，也学习到了很多关于计算机以及编程语言相关的知识，虽然我的数学和英语还是比较差，但是我会花更多的时间去学习提高这两门课程。这一学期让我感受到了大学生活是如此的丰富多彩，大学的时间很充裕，它更多的是让同学们自主复习，提高自己的学习能力和自立能力，为步入社会做好准备，但我有时候也没能把握好自己的时间，没能高效率的学习，我希望我下个学期能够调整自己的心态，好好学好自己的专业知识，不让自己的父母失望。</p>
            </div>
            <div class="card">
                <h2>兴趣爱好</h2>
                <h5>2020年9月1日</h5>
                <div class="fakeimg" style="height:200px">
                    <a href="#"><img src="../个人博客/imges/7.jfif" alt="大数据" style="height: 200px;width: 100%;float: left;"></a>
                </div>
                <p>热爱篮球，永不过时!</p>
                <p>我没有高超的运球，也没有精准的三分，更没有高大强壮的身体素质，但是我热爱篮球，是篮球让我感受到不一样的感觉，我希望一直这样下去。</p>
            </div> 
        </div>
        <div class="rightcolumn">
            <div class="card1">
                <h2>我的前端开发</h2>
                <div class="fakeimg" style="height: 200px;">
                    <a href="#"><img src="../个人博客/imges/8.jpg" alt="大数据" style="height: 200px;width: 100%;float: left;"></a>
                </div>
                <p>从热爱历史到面对一个未知的互联网领域，我的内心既兴奋、好奇，又惶恐不安。英语对我来说不是拦路虎，而数学逻辑却是我难以逾越的鸿沟。HTML还能凑合写出来，而一碰到JS,就连最简单的买几瓶可乐就让我唉声叹气、愁眉不展。不过，再难也要坚持，何况还有vue、react等，js代码就不用担心了。想让自己的代码更神秘一些，gulp自动压缩编译就可以搞定一切！</p>
            </div>
            <div class="card1">
                <h3>热门文章</h3>
                <div class="fakeimg1">
                    <a href="#"><img src="../个人博客/imges/2.jfif" alt="大数据" style="height: 300px;width: 100%;float: left;">我不是一个聪明的人，但我相信努力会让我变的聪明。</a>
                    </div>
                <div class="fakeimg1">
                    <a href="#"><img src="../个人博客/imges/3.jfif" alt="大数据" style="height: 300px;width: 100%;float: left;">从那里跌倒就从哪里爬起来，这是我的人生信仰。</a>
                    </div>
                <div class="fakeimg1"><a href="#"><img src="../个人博客/imges/6.jfif" alt="大数据" style="height: 300px;width: 100%;float: left;">我可以输，但我不会放弃，因为我想赢。</a></div>
        </div>
            <div class="card1">
                <h3>关于我</h3>
                <p>我就是我,不会改变...<br>
                    想象我的人生拥有一个独特的目标，我通过我所做的，我和外界的互动关系以及我的生活方式来实现它，描绘我的人生目标，坚持有意义的生活，乐观、向上的生活，愉快、开心的工作，志存高远。
                </p>
            </div>
        </div>
    </div>
    <div class="footer">
        <h2>地址:广西壮族自治区&nbsp; QQ:25605162626 &nbsp; 电话号码:18176863795</h2>
    </div>

</body>
</html>

总结：

以上就是今天要讲的内容，本文仅仅简单介绍HTML5+css3的使用，以及响应式布局的运用。

文科生的编程路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
响应式布局的个人博客

希望你的喜欢。文章目录前言一、个人博客的相关图片二、相关代码总结：前言这是本人去年的时候做的一个响应式布局的个人博客，主要是通过HTML5+CSS3完成的，非常适合不懂响应式布局的小白练手。`提示：以下是本篇文章正文内容一、个人博客的相关图片二、相关代码代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht.
复制链接

扫一扫