云南大学校园博客前端开发

最新推荐文章于 2024-08-22 19:27:43 发布

哥斯拉的哥

最新推荐文章于 2024-08-22 19:27:43 发布

阅读量184

点赞数

分类专栏：项目开发文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_53207385/article/details/120471722

版权

项目开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="CSS/login_style.css">
    <title>登录界面</title>
</head>
<body>
<form action="../校园博客首页/index.html" method="post">
<div id="bigBox">
    <h1>LOGIN</h1>
    <div class="inputBox">
        <div class="inputText">
            <input type="text" placeholder="请输入用户名" required name="username" value="哥斯拉的哥" readonly>
        </div>
        <div class="inputText">
            <input type="password"placeholder="请输入密码" required name="password">
        </div>
        <input type="submit" class="inputButton" value="LOGIN" onclick="javascrtpt:window.location.href='../校园博客首页/index.html'">
    </div>
</div>
</form>

</body>
</html>

css

body{
    margin: 0;
    padding: 0;
    background-image: url("../recources/image/7.png");
    background-size: cover;
    background-repeat: no-repeat;
}
#bigBox
{
    margin: 0 auto;
    margin-top: 200px;
    padding: 20px 50px;
    background-color: #00000090;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    text-align: center;
}
#bigBox h1
{
    color: white;
}
#bigBox .inputBox
{
    margin-top: 50px;
}
#bigBox .inputBox .inputText
{
    margin-top: 20px;
}
#bigBox .inputBox .inputText input
{
    border: 0;
    padding: 10px 10px;
    border-bottom: 1px solid white;
    background-color: #00000000;
    color: white;
}
#bigBox .inputBox .inputButton
{
    border: 0;
    width: 150px;
    height: 25px;
    color: white;
    margin-top: 30px;
    border-radius: 20px;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

主页部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云南大学校园博客</title>
    <link rel="stylesheet" href="CSS/index_style.css">
</head>
<body>

<div class="header">
    <h1>云大博客</h1>
</div>

<div class="topnav">
    <a href="../学术交流界面/academic_exchange.html">学术交流</a>
    <a href="#">失物招领</a>
    <a href="#">兴趣爱好交流</a>
    <a href="#">校内新闻</a>
</div>
<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <h2>云南大学博客开发</h2>
            <h5>2021 年 3 月 23日</h5>
            <img src="../校园博客登录界面/recources/image/5.png" alt="图片" style="height:200px;" class="img" >

            <p>一些文本...</p>
            <p>博客的内容！博客的内容博客的内容博客的内容博客的内容</p>
        </div>
        <div class="card">
            <h2>又一个标题</h2>
            <h5>2021 年 5月 25日</h5>
            <img src="../校园博客登录界面/recources/image/6.JPG" alt="图片" style="height:200px;" class="img" >
            <p>一些文本...</p>
            <p>博客的内容博客的内容博客的内容博客的内容博客的内容博客的内容博客的内容博客的内容博客的内容.</p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2>关于我们</h2>
            <img src="../校园博客登录界面/recources/image/7.png" alt="图片" style="height:100px;"class="img" >
            <p>关于我们的一些信息..</p>
        </div>
        <div class="card">
            <h3>热门文章</h3>
            <div class="img"><p>图片或文本</p></div>
            <div class="img"><p>图片或文本</p></div>
            <div class="img"><p>图片或文本</p></div>
        </div>
        <div class="card">
            <h3>关注我</h3>
            <p>一些文本...</p>
        </div>
    </div>
</div>
<audio src="resources/audio/music.mp3" class="audio" controls autoplay></audio>

<div class="footer">
    <p>底部区域</p>
</div>


</body>
</html>

CSS:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* 头部样式 */
.header {
    background-color: #aaaaaa;
    padding: 20px;
    text-align: center;
    background-image: url("../resources/image/10.png");
    background-size:300px;



}

/* 导航条 */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* 导航链接 */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* 链接 - 修改颜色 */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
    float: left;
    width: 75%;
}

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

/* 图像部分 */
.img {
    background-color: #aaa;
    width: 60%;
    padding: 0px;
    border-radius: 20px;

}

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

/* 列后面清除浮动 */
.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) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

总结：网上学习要多练习，不然光看别人打代码是不能断了自己代码能力的，前端的开发我认为审美很重要，我的其他页面没有放上去，因为太丑了，连一起做项目的舍友都看不下去了，所以要仔细研究一些美的界面，才可以做得更好。