咖啡屋HTML和CSS

最新推荐文章于 2023-05-07 15:38:35 发布
最新推荐文章于 2023-05-07 15:38:35 发布
阅读量396 收藏 5
点赞数
分类专栏： web 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Little_Uncle/article/details/115307461
版权

咖啡屋HTML和CSS
G4lax
空中摇摆的pi

/*<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="ex3-3.css">
</head>
<body>
<div id="container">
    <div id="header">
        <h1>zyh's coffee house</h1>
    </div>
    <div id="main">
        <div class="sidebar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Mune</a></li>
                <li><a href="">Music</a></li>
                <li><a href="">Jobs</a></li>
            </ul>
        </div>
*/
        <div class="mainbar">
            <div class="bbb">
                <p>Come in and experiences</p><br>
                <ul>
                    <li>special coffee and tea</li>
                    <li>freshly made sanwithes</li>
                    <li>open mid nights</li>
                    <li>...</li>
                </ul>
                <p>23 pine road</p><br>
                <p>nottingham,ng15yu</p><br>
                <p>0115 97365251</p>
            </div>
            <img src="coffeehouse.jpg" alt="photo is missing">
        </div>
    </div>
    <div id="footer">
        <p>copyright&copy;<a href="mailto:zjvivi@126.com">
            zjvivi@126.com</a></p>

    </div>
</div>
</body>
</html>

CSS

@media all and (min-width:768px)
{
    *{
        margin:0;
    }
    body{
        color: #330000;
        background-color:#ffffcc;
    }
    .sidebar ul{
        list-style: none;
        position:relative;
        transform: translateX(5%) translateY(25%);
    }
    #container{
        width:50%;
        position:absolute;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        border: 1px solid #000;
        font-size: 15px;
    }
    #header,#footer{
        background:#ccaa66;
    }
    #header{
        height:100px;
        text-align:center;
        border-bottom:1px solid #000 ;
    }
    #header h1{
        position: relative;
        top: 50%;
        transform:translateY(-50%) ;
    }
    #main{
        background:#E8D882;
        /*border:3px solid #000;*/
        overflow:hidden;
        font-size: 15px;
    }

    .sidebar{
        background:#E8D882;
        width:23%;
        float:left;
    }
    .bbb{
        position:relative;
        transform: translateX(5%) translateY(10%);
    }
    .mainbar{
        background: #f1e8b0;
        width:76%;
        float:right;
        border-left:1px solid #000;
    }
    .mainbar img{
        width:30%;
        float:right;
        position: relative;
        left: -100px;
        top:-150px;
    }
    #footer{
        clear:both;
        height:50px;
        text-align:center;
        border-top: 1px solid #000;
        font-size: 15px;
    }
    a{
        text-decoration:none;
    }
    #footer a{
        text-decoration:underline;
    }

}
@media all and (max-width:768px){
    *{
        margin:0;
        box-sizing:border-box;
    }
    body{
        background: #ffc;
        color:#300;
        font-size:14px;
        position:absolute;
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .sidebar ul{
        list-style: none;
    }
    #container{
        width:70%;
        position:absolute;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        border: 1px solid #000;
    }
    #header,#footer{
        background:#ccaa66;
    }
    #header{
        height:100px;
        text-align:center;
        border-bottom:1px solid #000 ;
    }
    #header h1{
        position: relative;
        top: 50%;
        transform:translateY(-50%) ;
    }
    #main{
        background:#E8D882;
        /*border:3px solid #000;*/
        width:100%;
        overflow:hidden;
        display:flex;
        flex-direction: column-reverse;
    }
    .sidebar{
        background:#E8D882;
        margin: auto;
        position: relative;
        font-size: 14px;
    }
    .mainbar{
        background: #f1e8b0;
        width:100%;
        height:20%;
        float:right;
        display:flex;
        flex-direction: column-reverse;
        justify-content:center;
    }
    .bbb{
        position:relative;
        order:0;
        font-size: 14px;
        transform: translateX(22%);
    }

    #footer{
        clear:both;
        height:50px;
        text-align:center;
        border-top: 1px solid #000;
        font-size: 14px;
    }

    .mainbar img{
        display:flex;
        order:1;
        width:50%;
        max-width: 100%;
        height:40%;
        position: relative;
        margin-top: 10px;
        transform: translateX(50%) translateY(0%);
    }
    a{
        text-decoration:none;
    }
    #footer a{
        text-decoration:underline;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="ex3-3.css">
</head>
<body>
<div id="container">
    <div id="header">
        <h1>zyh's coffee house</h1>
    </div>
    <div id="main">
        <div class="sidebar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Mune</a></li>
                <li><a href="">Music</a></li>
                <li><a href="">Jobs</a></li>
            </ul>
        </div>

        <div class="mainbar">
            <div class="bbb">
                <p>Come in and experiences</p><br>
                <ul>
                    <li>special coffee and tea</li>
                    <li>freshly made sanwithes</li>
                    <li>open mid nights</li>
                    <li>...</li>
                </ul>
                <p>23 pine road</p><br>
                <p>nottingham,ng15yu</p><br>
                <p>0115 97365251</p>
            </div>
            <img src="coffeehouse.jpg" alt="photo is missing">
        </div>
    </div>
    <div id="footer">
        <p>copyright&copy;<a href="mailto:zjvivi@126.com">
            zjvivi@126.com</a></p>

    </div>
</div>
</body>
</html>

## 作业
*{
    margin: 0;
}

/*约束链接文字的点击前样式*/
a{
    color: #093590;
    text-decoration: none;
}

/*约束链接文字点击后样式*/
a:active {
    text-decoration: none;
    color: #d9e5d9;
}

body {
    color: #330000;
    background-color: white;
}

#footer {
    clear: both;
    text-align: center;
    border-top: 1px solid #369ace;
}



#header {
    text-align: center;
    border-bottom: 1px solid #000;

}

#header, #footer {
    background: #1988d4;
}

#header h1 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


#container {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 1px solid #000;
}


/* 大视口 */
@media all and (min-width: 768px) {
    #header,#footer{
        height: 100px;
    }

    #main {
        background: #ece9d7;
        overflow: hidden;
    }

    .mainbar p {
        position: relative;
        transform: translateX(3%) translateY(220%);
    }
    .mainbar {
        background: #d5d1b5;
        width: 100%;
        float: right;
    }
    .mainbar img {
        width: 30%;
        float: right;
        position: relative;
        left: -45px;
        top: -150px;
        transform: translateY(40%);
        border-radius: 100%;
        border: 10px solid grey;
    }
    a {
        text-decoration: none;
    }

    #footer p {
        position: relative;
        top: 50%;
        transform: translateY(-130%);
        padding-top: 1%;
    }

    .mainbar ul {
        position: center;
        transform: translateX(7%) translateY(40%);
        list-style: unset;
    }

    .sidebar {
        width: 100%;
        background: #f1f1df;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar ul{
        padding: 0;
        margin: 0;
    }
    .sidebar ul span{
        margin-right: 80px;
    }
    .sidebar ul span:nth-child(4){
        margin: 0;
    }
    .sidebar ul span:hover{
        transform: rotate(0deg) scale(1);
        border-radius: 5px;

        background-color: rgb(42, 204, 245);
    }
    .sidebar ul span a{
        text-decoration:none;
    }

}
@media all and (max-width: 768px){

    #main{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap:wrap;
    }

    #header,#footer{
        height: 75px;
    }
    .mainbar{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap:wrap;
    }
    img{
        max-width: 100%;
        max-height: 100%;
        width: 70%;
        order:-1;
        margin-top: 2em;
    }

    #welcome{
        padding-top: 3em;
        margin-right: 9em;
    }

    .sidebar{
        width: 100%;
        order:22;
    }

    .information{
        margin-top: -10%;
        padding-top: 3em;
        margin-right: 12em;
    }

    .information p{
        line-height:2em;
    }

    #footer p {
        position: relative;
        top: 50%;
        transform: translateY(-130%);
        padding-top: 1%;
    }

    .mainbar ul {
        list-style: unset;
        margin-left: 1em;
    }

    .sidebar{
        background: #E8D882;
    }

    .sidebar ul {
        position: relative;
        list-style: none;
        transform: translateX(13%) translateY(-3%);
    }

    .sidebar ul li {
        line-height: 130%;
        padding-top: 10px;
    }
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page layout ex</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="kaoshi.css"/>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>header</h1>
    </div>
    <div id="main">

        <div class="sidebar">
            <ul>
                <span><a href="">menu1</a></span>
                <span><a href="">menu2</a></span>
                <span><a href="">menu3</a></span>
                <span><a href="">menu4</a></span>
            </ul>
        </div>


        <div class="mainbar">
            <p id="welcome">this is main content</p><br/>
            <ul>
                <li>li-item1</li>
                <li>li-item2</li>
                <li>li-item3</li>
                <li>li-item4</li>
                <li>li-item5</li>
            </ul><br/>



            <img src="coffee.jpg" width="200" height="175" alt="coffee">

        </div>
    </div>
    <div id="footer">
        <p>copyright@zyh</p>
    </div>
</div>
</body>
</html>
Little_Uncle
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端设计与开发期末作品_期末大作业【使用HTML制作汽车首页】
weixin__BJ050106的博客
08-09 602
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常......
web前端期末大作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript
专注于dreamweaver网页设计制作
08-09 1862
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV......
＜HTML/CSS3 实践应用＞咖啡馆网站主页
最新发布
X_YMY的博客
05-07 318
效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Document</title> </head> <style type="text/css"> *{ margin: 0 px; padding: 0; } body{ font-size: 16px; color: #673
编写咖啡店菜单 基础CSS
一七
03-22 1040
可以使用 CSS 设置 HTML 元素的颜色、字体、大小等属性
HTML&CSS案例—咖啡店（定位+布局+CSS3）
zjj8008120308的博客
09-12 6873
HTML&CSS案例—咖啡店该案例是从最终效果到实现的过程一，分析页面布局二，做整体布局1. 创建一个站点文件夹，再加上子文件夹2. 先初步输入代码，4部分4< div >,广告后面加三， 再前面的基础上将内容的结构再丰富一下，然后将对应的样式再设置一下（其实现在问题已经分解成了一个个小问题，我们在每个部分继续做下去就行了）四，最终效果及源码 该案例是从最终效果到实现的过程 一，分析页面布局 首先页面的最左侧是一个广告，采用固定定位；然后最上面header是一个头部，主要是一张图片；下面
咖啡屋的html5页面
06-21
这个项目利用了HTML5的先进功能，结合CSS和JavaScript技术，为用户提供了一个仿真的咖啡屋在线体验。 【HTML5】是超文本标记语言的最新版本，提供了许多新的元素、属性和API，以更好地支持多媒体内容、离线存储、...
东方咖啡屋网页模板
01-22
【东方咖啡屋网页模板】是一款专为咖啡馆和餐饮业设计的网页模板，它结合了东方元素和现代网页设计趋势，旨在为用户创造出一个既具有传统韵味又不失时尚感的在线展示平台。这款模板适用于搭建各类咖啡馆、茶室或小...
休闲咖啡屋响应式网页模板
01-21
总的来说，这款【休闲咖啡屋响应式网页模板】结合了优雅的设计和实用的功能，是提升咖啡屋在线形象的理想选择。其响应式特性确保了在多设备间的无缝浏览，而丰富的页面元素和可定制性则满足了不同用户的需求。无论是...
咖啡休闲屋HTML网站模板
12-01
"咖啡休闲屋HTML网站模板"是一个专为咖啡厅、餐厅或休闲场所设计的网页模板，其棕色风格暗示了温馨、舒适和传统的氛围，与咖啡馆的环境相契合。 HTML（HyperText Markup Language）是网站的基础语言，用于定义网页...
咖啡屋点心响应式网页模板
01-21
"咖啡屋点心响应式网页模板"是专门为咖啡屋和点心店设计的一款网页模板，它利用HTML、CSS3和JavaScript等技术，根据用户设备的屏幕尺寸和方向自动调整布局，确保内容清晰易读，操作流畅。 这款模板的核心特点在于其...
咖啡厅唯美的html网页模板
12-09
很好很唯美的咖啡厅网页模板，html的，可以用，很不错的~~
html咖啡网页设计模板下载
07-21
html咖啡网页设计模板下载，网站采用html+css的设计模式，简洁大气
咖啡店 HTML网站模板
12-13
咖啡店 HTML网站模板是一款适合咖啡馆企业销售展示网页模板下载。
咖啡馆CSS网页模板
11-24
咖啡馆CSS网页模板 紫色 餐饮 美食 咖啡馆 商业 设计 主页 HTML DIV+CSS 模板下载
html咖啡网站
11-30
一个女生做的网页，进入之后，让你感受到仿佛来到了一个咖啡故乡，呵呵，要结课了，老师让做一个静态网页，今天高兴拿出来和大家分享一下
简单的咖啡文化静态HTML网页设计作品 DIV布局咖啡馆文化网页模板代码 DW咖啡网站制作成品
HTML网页设计
08-02 2538
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，...
基于html的咖啡网站
weixin_46820017的博客
05-30 584
咖啡网站
HTML&CSS案例---咖啡店
qq_45021462的博客
07-13 5540
HTML&CSS案例—咖啡店 最终页面效果 页面结构为：最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。具体代码如下； HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-08 8674
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页
HTML5和CSS3响应式设计实战指南
Web设计：HTML5和CSS3实战 本书《Web设计：HTML5和CSS3实战》是为读者提供了一本全面深入的Web设计指南，涵盖了当前Web设计中热门的响应式设计技术与HTML5和CSS3的结合应用。本书适合各个层次的Web开发和设计人员...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值