把文字新闻放到一个盒子里?

时间:2012-05-17 09:57:59

标签: css

on http://www.youngcreativity.se

您可以认为它是新闻Feed。

当用户上传新闻时,是否有可能像圆框一样显示所有文字/新闻?在Feed中有多少新闻后,该框应自动调整大小。 php代码看起来像这样。

<!DOCTYPE html>
<html lang='en'>
<head>
<style type="text/css">

#boxID{
border:2px solid;
border-radius:25px;
width:auto; 
height:auto;
}


element {
color: black;
}




body {


-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
background-image: url(bgn1.png);
background-repeat: no-repeat;
background-position: center top;
}
.news {
font-family: Rough_Typewriter;
font-size: 36px;
}
</style>

<meta charset="UTF-8">
<title>iWrite</title>
<meta name="view" content="width-device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">

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


</head>
<h1 class="news">iWrite</h1>
<p>
<hr>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<a href='post.php'>Want to post a text?</a>
<?php

//connect

mysql_connect("server","username","password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

//query the database
$getnews = mysql_query("SELECT * FROM news ORDER BY id DESC") or die(mysql_query());

while ($row = mysql_fetch_assoc($getnews))
{

//get data
$id = $row['id'];
$title = $row['title'];
$body = $row['body'];
$date = $row['date'];

echo "
<b>$title posted on $date</b><br>
";

echo nl2br($body);

echo "<hr>
";

}

mysql_real_escape_string();



?>

</hr></html>

1 个答案:

答案 0 :(得分:1)

您可以为Div / class添加CSS半径:

{
border:2px solid;
border-radius:25px;
}

您可以将它放在css class / id:

中来使用它
#boxID{
border:2px solid;
border-radius:25px;
}

<div id="boxID"></div>

或者你可以根本不使用CSS类/ ids(这不酷):

<div id="boxID" style="border:2px solid; border-radius:25px;"></div>

编辑:

好的,要有一个大圆框,这是做什么的:

<!DOCTYPE html>
<html lang='en'>
<head>
<style type="text/css">

#boxID{
border:2px solid;
border-radius:25px;
width:auto; 
height:auto;
}


element {
color: black;
}




body {


-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
background-image: url(bgn1.png);
background-repeat: no-repeat;
background-position: center top;
 text-align: center;
}
.news {
font-family: Rough_Typewriter;
font-size: 36px;
}
.bigBox{

border:2px solid white;
border-radius:10px;
}
</style>

<meta charset="UTF-8">
<title>iWrite</title>
<meta name="view" content="width-device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">

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


</head>
<div class="bigBox">
<h1 class="news">iWrite</h1>
<p>
<hr>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<a href='post.php'>Want to post a text?</a>
<?php

//connect

mysql_connect("server","username","password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

//query the database
$getnews = mysql_query("SELECT * FROM news ORDER BY id DESC") or die(mysql_query());

while ($row = mysql_fetch_assoc($getnews))
{

//get data
$id = $row['id'];
    $title = htmlspecialchars(strip_tags($row['title'])); 
$body = htmlspecialchars(strip_tags($row['body']));
$date = $row['date'];

echo "
<b>$title posted on $date</b><br>
";

echo nl2br($body);

echo "<hr>
";

}





?>

</hr>
</div></html>

试一试。