研发部第一次培训心得

最新推荐文章于 2024-07-25 10:45:42 发布

qq_43479740

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量273

点赞数 1

分类专栏：研发部培训

本文链接：https://blog.csdn.net/qq_43479740/article/details/109265330

版权

CSS HTML 类选择器样式表项目实战

关键词由CSDN通过智能技术生成

研发部培训专栏收录该内容

0 篇文章 0 订阅

订阅专栏

文章目录

培训心得

培训心得

云麓谷的研发部大佬云集，而我只是一个菜鸡。简单谈谈我第一次培训学到的东西吧~

1. 引入css文件

CSS让原本单调的html页面漂亮很多（引入CSS文件的方式如下）

<link rel="stylesheet" href="index.css"/>

2. css的类选择器

第一步，在html标签中添加class属性，例如：

<div class="navi-title">About</div>

第二步，在css文件中添加

.title-header {
    font-size: 1.7em; /*设置字体大小为1.7em。em是相bai对长度单位。相对于当前对象内文本的字du体尺寸。*/
    font-weight: bold; /*设置字体加粗*/
}

3.完整项目代码

好啦，直接贴完整的项目代码吧~

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一次培训</title>
    <link rel="stylesheet" href="./index.css"/>
</head>
<body>

<div class="head">
    <div class="logo-box">
        <img class="restaurant-logo" src="images/Logo.png" alt="logo">
        <div class="header-left-text">Gratia</div>
    </div>
    <div class="navigation">
        <div class="navi-title">About</div>
        <div class="navi-title">Menu</div>
        <div class="navi-title">Gallery</div>
        <div class="navi-title">Contact</div>
    </div>
</div>

<div class="wrapper">
    <div class="title">
        <div class="title-header">MENU</div>
        <div class="title-desc">Lorem ipsum dolor sit amet,consecteta adjprieeing elht</div>
    </div>
    <div class="galary">

    </div>
</div>


<div class="pics">
    <div class="content">
        <div class="img">
            <img class="images" src="./images/Main%20Dishes.png" alt="Main Dishes">
            <div>
                <h1>MAIN DISHES</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="img">
            <img class="images" src="./images/Soups.png" alt="Soups">
            <div>
                <h1>SOUPS</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="img">
            <img class="images" src="./images/Hamburgers.png" alt="Hamburgers">
            <div>
                <h1>HAMBURGERS</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="img">
            <img class="images" src="./images/Desserts.png" alt="Desserts">
            <div>
                <h1>DESSERTS</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="img">
            <img class="images" src="./images/Barbecue.png" alt="Barbecue">
            <div>
                <h1>BARBECUE</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="img">
            <img class="images" src="./images/Salads.png" alt="Salads">
            <div>
                <h1>SALADS</h1>
            </div>
            <hr width="30px" color="#F5F5F5">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

</div>


<div class="footer">
    <div class="wrap">
        <div class="circle">
            <img class="logo-png" src="./images/Logo.png" alt="Logo">
            <p class="footp">Gratia Restaurant</p>
            <p>Copyright 2016. All rights reserved by symu</p>
        </div>

    </div>
    <hr class="foot-hr" color="#F5F5F5">
</div>

<div class="contact">
    <ul>
        <li><a href="http://www.facebook.com" target="_blank"><img src="./images/FB.png" alt="facebook"></a></li>
        <li><a href="http://www.twitter.com" target="_blank"><img src="./images/TR.png" alt="twitter"></a></li>
        <li><a href="http://www.instagram.com" target="_blank"><img src="./images/IG.png" alt="instagram"></a></li>
    </ul>
</div>

</body>
</html>

index.css

.head{
    width: 100%;
    padding: 10px;
    position: fixed;
    top: 0px;
    background-color: #fff;
    border-bottom: solid #F5F5F5 0.15px;
}

.head img{
    width: 35px;
    height: 35px;
    position: relative;
    top: 5px;
    margin-left: 50px;
    margin-right: 10px;
}

.head span{
    margin: 5px;
    color: green;
    font-size: 30px;
    font-family: SimSun;
}

.head ul{
    list-style-type: none;
    float: right;
    margin-right: 70px;
}

.head li{
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
}

.head a{
    display: block;
    width: 100px;
    padding: 3px;
    color: black;
    text-align: center;
    text-decoration: none;
    font-family: bold;
}

.head a:hover,a:active {
    color: orange;
}

.menu{
    margin: 0 auto;
    width: 40%;
    padding: 10px;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 75px;
    background-image: url(images/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 550px 170px;
}

.menu p{
    margin-bottom: 30px;
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.pics {
    margin: 2px auto;
    width: 90%;
    text-align: center;
}

.content:hover .images {
    transform: scale(1.2); /*鼠标悬停时，增加了图片放大动画*/
}

.img{
    display: inline-block;
    margin: 18px;
    text-align: center;
    box-shadow: 0 0 20px 20px #F5F5F5;
    border-radius: 20px;
}

.img img{
    width: 400px;
    height: 300px;
}

.img p{
    margin-top: 30px;
    margin-bottom: 50px;
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.foot{
    margin: 0 auto;
    text-align: center;
    margin-top: 140px;
}

.foot img{
    width: 60px;
    height: 60px;
    padding: 15px;
    position: relative;
    top: 58px;
    border: solid #F5F5F5 2px;
    border-radius: 100px;
    background-color: #fff;
}

.footp{
    margin-top: 71px;
    font-weight: bold;
}

.foot p {
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.contact{
    margin: 0 auto;
    width: 200px;
    border-top: solid #f5f5f5 2px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.contact ul{
    list-style-type: none;
    text-align: center;
    padding: 1px;
}

.contact li{
    margin: 8px;
    display: inline-block;
}

.content:hover .images {
    transform: scale(1.2);
}


/*新添加的*/

.head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 14px;
    padding: 10px;
    border-bottom: 1px solid #e7e7e7;
    /*opacity: 0.5;*/ /*设置透明度*/
}

.logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-left-text {
    font-weight: bold;
}

.restaurant-logo {
    width: 50px;
    height: 50px;
    margin: 8px;
}

.content {
    overflow: hidden;
    float: left;
    margin: 5px;
    position: relative;
}

.box {
    flex-direction: row;
}

.restaurant-name {
    font-size: 1.3em;
    font-weight: bold;
}

.navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navi-title {
    font-size: 1.4em;
    margin: 20px;
}

.wrapper {
    margin: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 40%;
    padding: 10px;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 75px;
    background-image: url(images/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 550px 170px;
}

.title {
    width: 537px;
    height: 160px;
    background-image: url("images/background.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 20px;
}

.title-header {
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 30px;
}

.title-desc {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.galary {

}

.footer {
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin: 0 auto;
    border-top: solid #F5F5F5 2px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin: 0 auto;
    text-align: center;
}

.wrap {
    position: relative;
    text-align: center;
    width: 120px;
    height: 120px;
    overflow: hidden;
    align-items: center;
    flex-direction: row;
    align-items: center;
    background-position: center;
    color: #C0C0C0;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin: 0 auto;
    border-top: solid #F5F5F5 2px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin: 0 auto;
    text-align: center;
}

.circle {
    float: top;
    height: 100%;
    text-align: center;
    align-items: center;
    background-position: center;
    box-sizing: border-box;
    border: 2px solid #e7e7e7;
    border-radius: 50%;
    flex-direction: row;
    align-items: center;





}

.logo-png {
    margin-top: 17px;
    flex-direction: row;
    align-items: center;

}

.foot-hr {
    width: 1000px;
}

body {
    text-align: center;
    flex-direction: row;
    align-items: center;
}

qq_43479740

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
研发部第一次培训心得

文章目录培训心得1. 引入css文件2. css的类选择器3.完整项目代码培训心得云麓谷的研发部大佬云集，而我只是一个菜鸡。简单谈谈我第一次培训学到的东西吧~1. 引入css文件CSS让原本单调的html页面漂亮很多（引入CSS文件的方式如下）<link rel="stylesheet" href="index.css"/>2. css的类选择器第一步，在html标签中添加class属性，例如：<div class="navi-title">About</
复制链接

扫一扫