Question

更新 ...这是我的最新代码。

现在需要一些方法来放置Button MIDDLE或BOTTOM（垂直）。
作为一个完整的新手，我欢迎任何其他评论这里使用的代码。

:) ...干杯

  	  
* 	html {
	font:   2em Georgia, sans-serif; 
	color:  #7b7b7b;
	clear:  both;
	float:  justify;
}

body {
	margin: 0.5em 4.0em 0.5em 4.0em;
	padding: 1.0em 4.0em 1.0em 4.0em;
	width: 55.0em;
	height: auto;
	background-color: tan;
}
.imgclass {
	border: 0.15em solid yellow;
	margin-left: 0;
	padding-left: 0;
}
.wrapper {
    display: grid;
    grid-gap: 1.0em;
    grid-template-columns: 75% 25%;
    grid-template-areas:
			"header  header"
			"picture  button"
			"article  article"
			"footer  footer";
    background: tan;
	margin-top: 2.0em;
	margin-left: 1.0em;
    color: teal;
	width: 100%;
    }

.box {
	color: white;
	border-radius: 0.5em;
	padding: 0 2.0em 0 2.0em;
	margin: 0 0 0 1.0em;
}

.header {
	grid-area: header;
	position: relative;	
	margin-left: 1.0em;
	padding-left: 1.0em;
	border: 1.0em;
	border-color: white;
	height: auto;
}

.picholder {
	grid-template-columns: 1 -1;
	grid-template-rows: 2 3;
	margin: 0;
}

.picture {
	grid-area: picture;
	grid-template-columns: 2;
	grid-template-rows: 3;
	position: relative;
	margin-left: 0;
	border-left: 0;
} 

.button {
	grid-area: button;
	position: relative;
	margin-left: 1.0em;
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #11828a);
	background-image: -moz-linear-gradient(top, #3498db, #11828a);
	background-image: -ms-linear-gradient(top, #3498db, #11828a);
	background-image: -o-linear-gradient(top, #3498db, #11828a);
	background-image: linear-gradient(to bottom, #3498db, #11828a);
	-webkit-border-radius: 1.0em;
	-moz-border-radius: 1.0em;
	width: 12.0em;
	border-radius: 1.0em;
	font-family: Georgia;
	color: #c4db14;
	font-size: 1.0em;
	padding: 0.7em 1.0em 0.7em 1,0em;
	border: solid #96d60b 0.2em;
	text-decoration: none;
} 
.button:hover {
	background: #fc3c63;
	background-image: -webkit-linear-gradient(top, #fc3c63, #91092b);
	background-image: -moz-linear-gradient(top, #fc3c63, #91092b);
	background-image: -ms-linear-gradient(top, #fc3c63, #91092b);
	background-image: -o-linear-gradient(top, #fc3c63, #91092b);
	background-image: linear-gradient(to bottom, #fc3c63, #91092b);
	text-decoration: none;
} 
.button:active {
	background-color: #3e8e41;
	box-shadow: 0 0.1em #666;
	transform: translateY(0.2em);
} 

.article {
	grid-area: article;
  	grid-template-columns: 1 -1;
	grid-template-rows: 4;
	position: relative;
	background: coral;
	margin: 0 0 0 2.0em;;
	padding:1.0em 1.0em 1.0em 2.0em; 	
}

.footer {
	grid-area: footer;	
	background-color: maroon;
	text-align: center;
	padding: 0 0 0 0;
	height: 2.0em;
}



h1 { 
	font-size: 1.0em; 
	color: blue; 
	margin: 0;
}
h2 { 
	font-size: 0.75em; 
	color: white; 
	margin: 1.0em;
}
h3 { 
	font-size: 1.2em; 
	text-align: center;
	color: white; 
	margin: 0;
}
t1 { font: 400 100px/1.3 'Berkshire Swash', sans-serif; 
	color: red; 
	text-shadow: 1px 1px 0 #fdfdfd 4px 4px 0 rgba(0,0,0,0.15); 
	font-style: italic; 
	font-weight: 600;
	background: grey;
}
t2 {  
font-family: 'Georgia', sans-serif; 
color: black; 
text-align: center;
font-size: 0.6em; 
margin: 0.2em;
padding: 0.2em;
}

a { color: #dc8100; text-decoration: none; 
}
a:hover { color: #333; text-decoration: none; 
}

<html>

<head>
<title>TestSite >>> ProPokerUK ... testIndex.html ... testCSS.css</title>
<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Georgia' rel='stylesheet' type='text/css'>	
<link rel="stylesheet" type="text/css" href="Styles/reset.css" >		
<link rel="stylesheet" type="text/css" href="Styles/testCSS.css" >
<meta charset="utf-8" />	
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head>

<body>

<div class="wrapper">

	<div class="box header">
		<t1>&nbsp;ProPokerUK &nbsp;</t1>
	</div>
	<div class="box picholder">
		<div class="picture">
			<img class="imgclass" src="images/pp-img1.jpg" width="650px" alt="images/pp-img1.jpg" />
		</div>
	</div>
	
	<div class="button"><h3>Change Picture</h3></div>
	
	<div class="box article">
		<p><h1>Under Construction</h1>  
			<h2><br/>If you need to you can  &nbsp; <a href="mailto:webman@propokeruk.co.uk?Subject=ProPokerUK.co.uk website enquiry">contact us</a> &nbsp; by email. &nbsp; &nbsp;
				&nbsp; Otherwise we shall be online soon !  </h2>
		</p>
	</div>

	<div class="box footer">
		<p>  <t2>&nbsp;  copyright &nbsp; &#169ProPokerUK, 2017 &nbsp;</t2> </p>
	</div>

</div>

</body>

</html>

需要CSS Box / Grid布局建议

0 个答案: