驢子的生活日記

*{
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
text-align: center;
}
html,body{
height: 100%;
}
header {
background-image: url(../pic/mt-0951-home-header-bg.jpg);
background-color: #000;
width: 100%;
color:#fff;
height: 115%;
background-size: cover;
}
h2{
font-size: 50px;
}
p{
font-size: 16px;
}
.logo{
width: 1200px;
margin: auto;
}
.logo img,.logo h1,.logo nav,.logo li{
float: left;
padding: 5px 10px;
}
.nobackg{
color: #fff;
}
.block{
display: block;
width: 180px;
margin: auto;
}
.buttom{
width: 180px;
height: 60px;
border: 2px solid #fff;
line-height: 60px;
text-decoration: none;
}
.nobackg{
text-decoration: none;
}
header .buttom{
margin: 20px auto;
}
.today .buttom{
border-color: #000;
}
.item{
float: left;
width: 50%;
}
.title{
margin: 250px auto;
}
.title h3{
font-size: 30px;
}
.title h2{
font-size: 92px;
}
.nobackg .buttom:hover{
color: #DD5220;
background-color: #fff;
}
.banner{
width: 100%;
height: 80%;
}
.sbanner{
width: 70%;
}
.today{
/* width: 75%; */
margin:150px auto;
/* line-height: 10px; */
}
.today .item img{
width: 50%;
float: left;
padding: 5px;
}
.today .left img{
width: 60px;
height: 20px;
}
.today h2{
padding: 20px 0 10px;
}
.today p{
padding: 20px 0;
line-height: 2em;
}
.today a{
color: #000;
}
.today a:hover{
text-decoration: none;
}
.today .buttom{
background-color: #DD5220;
border: none;
color: #fff;
}
.today .buttom:hover{
background-color: #000;
color: #fff;
}
.about{
/* width: 100%; */
background-image: url(../pic/mt-0951-content-bg01.jpg);
background-attachment:fixed;
background-size: cover;
color: #fff;
height: 60%;

/* line-height: 25px; */
}
.about h2{
padding: 250px 0 50px;
}
.about a{
color: #fff;
}
.dec{
margin:150px auto;
width: 80%;
/* width: 90%; */
}
.dec h2{
font-size: 40px;
padding: 5px 0 40px;
}
.dec .left{
width: 40%;
}
.dec>.item>p,.dec>.item>h2{
text-align: left;
/* 為什麼不能在上面那個地方統一設定? */
}
.dec img{
padding: 20px;
text-align: right;
}
/* 為什麼這邊要設定img才會有bug阿? */
.total{
/* width: 100%; */
background-image: url(../pic/mt-0951-content-bg02.jpg);
background-attachment:fixed;
height: 60%;
color: #fff;
background-size: cover;
/* line-height: 10px; */
}
.total{
padding: 150px 0;
}
.total .item{
width: 25%;
}
.totalbox{
margin: auto;
width: 60%;
}
.total span{
font-size: 99px;
}
.total .item{
padding: 50px;
}
.menu{
margin: 150px auto;
}
.menubeloe{
text-align: left;
margin: 50px;
}
.menubeloe .border{
border-right: #ccc solid 1px;
}
.menubeloe .item{
padding: 0 50px;
}
.menubeloe .item h3{
font-size: 30px;
}
.menubeloe .item h4{
font-size: 20px;
padding: 20px 0 0;
}
.menubeloe>.item>h3,.menubeloe>.item>h4,.menubeloe>.item>p{
text-align: left;
}
.gallery{
/* width: 100%; */
height: 115%;
background-color: #242120;
color: #fff;
}
.gallery .top{
padding: 150px 0 40px;
}
.gallery div{
margin: auto;
}
.gallery .bot{
margin: auto;
width: 80%;
}
.bot img{
width: 20%;
padding: 5px;
}
.testimonial{
width: 40%;
margin: 150px auto;
}
.ournew{
/* width: 100%; */
background-color: #F4F4F4;
padding: 100px;
}
.news{
/* width: 100%; */
margin: auto;
}
.bot1i{
width: 280px;
background-image: url(../pic/mt-0951-gallery-img05.jpg);
height: 280px;
}
.bot2i{
width: 280px;
background-image: url(../pic/mt-0951-gallery-img03.jpg);
height: 280px;
}
.bot3i{
width: 280px;
background-image: url(../pic/mt-0951-gallery-img02.jpg);
height: 280px;
}
.news .bot{
width: 80%;
margin: auto;
text-align: center;
}
.news .bot .item{
margin: 5px;
}
.contact{
/* width: 100%; */
background-color: #242120;
height: 50%;
width: 100%;
}
.contact .box{
padding: 100px 0;
margin: auto;
width: 70%;
text-align: center;
}
.contact .block{
float: left;
width: 20%;
color: #F4F4F4;
margin: 10px 50px;
}
.block p{
color: #555453;
}
.block h4{
font-size: 30px;
}
.block h5{
font-size: 24px;
}
.block a{
color: #fff;
}
.clearfix{
clear: both;
}
#email{
background-color: #000;
border: none;
border-bottom: 1px solid #E5744D;
width: 200px;
}
footer{
background-color: #1F1C1C;
color: #494848;
height: 70px;
}

(繼續閱讀...)

驢子發表在痞客邦留言(0) 人氣()

個人分類： html 練習題目

▲top

May 12 Sun 2019 22:46
Html切版練習 float 第一版 Html

參考網站: https://template63451.motopreview.com/

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<div class="logo">
<img src="pic/mt-0951-logo.png" alt="">
<h1>PUGARIE</h1>
<nav>
<li><a href="#">HOME</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</nav>
</div>
<div class="clearfix"></div>
<div class="title">
<h3>SURPRISING FLAVOR</h3>
<h2>Combination</h2>
<p>Traditional cooking with a modern twist.</p>
<a class="nobackg block" href="#">
<div class="buttom">CONTACT US</div>
</a>

</div>
</header>
<div class="clearfix"></div>
<div class="today sbanner">
<div class="item left">
<h2>TODAY’S DEAL</h2>
<br>
<img style="float:none;width:100px" src="pic/mt-0951-star-icons.png" alt="">
<br>
<p>
25% off on all orders over $60 from our
<br>
lunch menu. Each lunch set included
</p>
<br>
<p>
Share on: <a href="#">Facebook</a> / <a href="#">Twitter</a> / <a href="#">Pinterest</a>
</p>

<br>
<a class="block" href="#" style="text-decoration: none">
<div class="buttom">LUNCH MENU</div>
</a>
</div>
<div class="item">
<img src="pic/mt-0951-home-img01.jpg" alt="">
<img src="pic/mt-0951-home-img02.jpg" alt="">
</div>
<div class="clearfix"></div>

</div>
<div class="about banner">
<h2>LOCALLY SOURCED, FRESH INGREDIENTS.</h2>
<p>Share on: <a href="#">Facebook</a> / <a href="#">Twitter</a> / <a href="#">Pinterest</a></p>
</div>
<div class="clearfix"></div>
<div class="dec sbanner">
<div class="item left">
<h2>WE ARE THE BEST QUALITY AND TRADITIONAL RESTAURANT</h2>
<p>These days are all Happy and Free. These days are all share them with me oh baby. Till the one day when
the lady met this fellow and they knew it was much more than a hunch. Good bye gray sky hello blue.
<br>
<br>
There's nothing can hold me when I hold you. Now the world don't move to the beat of just one drum. What
might be right for you may not be right for some. No phone no lights no motor car not a single luxury.
Like Robinson Crusoe it's primitive as can be. Goodbye gray sky hello blue.</p>
<img src="pic/mt-0951-text-img.png" alt="">
<p>Share on: Facebook / Twitter / Pinterest</p>
</div>
<div class="item">
<img src="pic/mt-0951-home-img03.jpg" alt="">
</div>
<div class="clearfix"></div>
</div>
<div class="total banner">
<h2>WE ARE DELICIOUS RESTAURANT</h2>
<div class="clearfix"></div>
<div class="totalbox">
<div class="item">
<p><span>4372</span><br>CHICKEN SERVED</p>
</div>
<div class="item">
<p><span>2795</span><br>FISH FRIED</p>
</div>
<div class="item">
<p><span>394</span><br>OUR CHEFS</p>
</div>
<div class="item">
<p><span>1678</span><br>SOUP SERVED</p>
</div>
</div>
</div>
<div class="menu sbanner">
<div class="menutop">
<h2>MOUTH-WATERING MENU</h2>
<br>
<img src="pic/mt-0951-star-icons.png" alt="">
<br>
<br>
<p>With glazed frontage on two sides of the building, overlooking the market <br> and a bustling Barbican
view.
</p>
</div>
<div class="menubeloe">
<div class="item border">
<h3>STARTER</h3>
<h4>BEEF TARTARE, $18</h4>
<p>tarragon mayonnaise, marinated shimeji mushrooms, black toast, herbs</p>
<br>
<h4>FOIE GRAS TERRINE, $21</h4>
<p>cranberry jelly, pumpkin purée and sponge, pickled mushrooms, figs</p>
<br>
<h4>VENISON CONFIT, $18</h4>
<p>mushroom ravioli, parsley crumb, straw potatoes, jus</p>
<br>
<h4>SMOKED TROUT, $18</h4>
<p>cauliflower, peas, pea sprouts, marinated cauliflower</p>
<br>
</div>
<div class="item">
<h3>MAINS</h3>
<h4>ROASTED DUCK LEG, $18</h4>
<p>duck confit, potato terrine, red cabbage with cranberries, roasted onion</p>
<br>
<h4>TERIYAKI SALMON, $21</h4>
<p>zucchini, sugar snap peas, noodles, shiitake mushrooms</p>
<br>
<h4>OCTOPUS, $18</h4>
<p>wasabi purée, pak choi, soy sprouts, coconut-lime sauce</p>
<br>
<h4>MUSHROOM RISOTTO, $18</h4>
<p>fried mushroom, parmesan cheese, cumin foam, herbs</p>
<br>
</div>
</div>
<div class="clearfix"></div>
</div>

<div class="gallery banner">
<div class="top">
<h2>OUR GALLERY</h2>
<br>
<img src="pic/mt-0951-star-icons.png" alt="">
</div>
<div class="bot">
<img src="pic/mt-0951-gallery-img01.jpg" alt="">
<img src="pic/mt-0951-gallery-img02.jpg" alt="">
<img src="pic/mt-0951-gallery-img03.jpg" alt="">
<img src="pic/mt-0951-gallery-img04.jpg" alt="">
<div class="clearfix"></div>
<img src="pic/mt-0951-gallery-img05.jpg" alt="">
<img src="pic/mt-0951-gallery-img06.jpg" alt="">
<img src="pic/mt-0951-gallery-img07.jpg" alt="">
<img src="pic/mt-0951-gallery-img08.jpg" alt="">
</div>
<div class="clearfix"></div>
</div>
<div class="testimonial sbanner">
<h2>TESTIMONIALS</h2>
<br>
<img src="pic/mt-0951-star-icons.png" alt="">
<br>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis labore distinctio pariatu atque
reprehenderit nam! Ratione sapiente repellat velit alias nihil excepturi nostrum, quaerat, error dicta
exercitationem pariatur hic ea.</p>
<img src="https://picsum.photos/800/700/?random=1">
</div>
<div class="ournew">
<div class="news sbanner">
<div class="top">
<h2>OUR NEWS</h2>
<img src="pic/mt-0951-star-icons.png" alt="">
</div>
<div class="bot">
<div class="item bot1i">
<p>JANUARY 20, 2017</p>
<h2>JOB POSITION: BARISTAWANTED</h2>
</div>
<div class="item bot2i">
<h2>JANUARY 22, 2017</h2>

<p>FRESH & EXCITING
DESERTS MENU</p>

</div>
<div class="item bot3i">
<h2>JANUARY 18, 2017</h2>
<p>PERFECT CUP OF TEA</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="contact banner">
<div class="box">
<div class="block">
<h4>PUGARIE RESTAURANT</h4>
<p>The Hoe, Barbican
PL48RT Plymouth
UK</p>
</div>
<div class="block">
<h4>RESERVATION</h4>
<p>

book@demolink.com
+ 166 900 891</p>
</div>
<div class="block">
<h4>NEWSLETTER</h4>
<p>Spam free, tasty news in your inbox.

Once a week.</p>
</div>
<div class="clearfix"></div>
<div class="block">
<h5>Get directions</h5>
<p><a href="#">Facebook</a>
<br>
<a href="#">Snapchat</a>
<br>
<a href="#">Instagram</a></p>
</div>
<div class="block">
<h4>PRIVATE DINING</h4>
<br>
<br>
<p>

private@demolink.com
<br>
+ 166 900 891</p>
</div>
<div class="block">
<form action="">
<input id="email" type="text" name="" id="" placeholder="Enter e-mail*">
<a class="nobackg block" href="#">
<div class="buttom">SUBSCRIBE</div>
</a>
</form>

</div>
</div>
<div class="clearfix"></div>
</div>
<footer>
©Copyrights 2019 - All Rights Reserved
</footer>
</body>

</html>

(繼續閱讀...)

驢子發表在痞客邦留言(0) 人氣()

個人分類： html 練習題目

▲top

Apr 26 Fri 2019 22:44
2019.04 方法練習(階乘!)

!1+!2+!3+!4+!5.............輸入的數字

(繼續閱讀...)

驢子發表在痞客邦留言(0) 人氣()

個人分類： JAVA 練習題目

▲top

Apr 23 Tue 2019 15:53
2010.04.23 陣列練習

輸入數字輸出相對應方塊陣列
1,2,3,4,5,6 1,2,3
1,2,3,4,5,5 1,2,2
1,2,3,4,4,4 1,1,1
1,2,3,3,3,3
1,2,2,2,2,2
1,1,1,1,1,1

(繼續閱讀...)

驢子發表在痞客邦留言(0) 人氣()

個人分類： JAVA 練習題目

▲top

Apr 16 Tue 2019 17:15
2019.04 陣列練習換位

1,2,34,5,67,8,8轉1,4,72,5,83,6,9
import java.util.*;
/*Please dont change class name, Dcoder
and class must not be public*/
//Compiler version JDK 1.8
class Dcoder
{
public static void main(String args[])
{
System.out.println("Hello, Dcoder!");
int num1[][]={
{1,2,3},
{4,5,6},
{7,8,9}};
int num2[][]={
{1,2,3},
{4,5,6},
{7,8,9}};
int a,b,c;
for(a=0;a<=2;a++)
{
for(b=0;b<=2;b++)
{
num2[b][a]=num1[a][b];
}
}
for(a=0;a<=2;a++)
{
for(b=0;b<=2;b++)
{
System.out.print(num2[a][b]+",");
}
System.out.println();
}
}
}

(繼續閱讀...)

驢子發表在痞客邦留言(0) 人氣()