произвольное тело в HTML с использованием CSS

Question

произвольное тело в HTML с использованием CSS

0

Я хочу закодировать следующий макет, используя HTML, CSS и javascript.

Я не могу понять, как я могу сделать слайд-шоу в макете с одинаковой формой. Лучше всего использовать изображения и сделать их одинаковыми в Photoshop. Я попытался взять фоновое изображение для раздела с фигурой сверху, но можно плитку нижней части изображения. вот мой код html и css. Обратите внимание, что код, который я даю, представляет собой пример кода с фиктивным текстом

вот мой код

CSS

@charset "utf-8";
/* CSS Document */

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

body {
    background: #CCC;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 62.5%;
}

h1 { font-size: 360%; }

h2 { font-size: 240%; }

h3 { font-size: 210%; }

h4 { font-size: 180%; }

h5 { 
    font-size: 160%;
    font-weight: bold;
}

h6 { font-size: 140%; }

#wrapper {
    width: 1100px;
    margin: 0 auto;
}

section {
    background: url(../img/bg.png) bottom repeat;
}

footer {
    background: -webkit-linear-gradient(top, #815b36, #3d2304);
    background: -moz-linear-gradient(top, #815b36, #3d2304);
    background: -ms-linear-gradient(top, #815b36, #3d2304);
    text-align: center;
    color: #FFF;
}

.links {
    width:100%;
    padding: 15px 100px;
}

.footerlinks {
    width: 25%;
    float: left;
    text-align: left;
}

.footerlinks a {
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
}

.copywrite {
    font-size:120%;
    padding: 5px 0;
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cafe Grinds</title>

<!---- Call External CSS---->
<link href="css/resetstyles.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

<!----Call External File---->
<script src="js/modernizr-latest.js" type="text/javascript" > </script>

</head>

<body class="clearfix">
    <div id="wrapper">
  <header>

  </header>
<section>
    <div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>       
        <div class="delight">
        </div>
        <div class="comb">
        </div>
        <div class="reward">
        </div>
    </div>      
  </section>
<footer>
    <div class="links">
        <div class="footerlinks">
            <ul>
                <li> <h5>Customer Service</h5> </li>
                <li><a href="index.html">Privacy Policy</a></li>
                <li><a href="index.html">Shipping</a></li>
                <li><a href="index.html">FAQ's</a></li>
            </ul>
        </div>
        <div class="footerlinks">
            <ul>
                <li> <h5>Online</h5> </li>
                <li><a href="index.html">Products</a></li>
                <li><a href="index.html">Gift Cards</a></li>
                <li><a href="index.html">Accessories</a></li>
            </ul>
        </div>
        <div class="footerlinks">
            <ul>
                <li> <h5>Franchise</h5> </li>
                <li><a href="index.html">Site Submittal</a></li>
                <li><a href="index.html">Pricing</a></li>
                <li><a href="index.html">Apply</a></li>
            </ul>
        </div>
        <div class="footerlinks">
            <ul>
                <li> <h5>Careers</h5> </li>
                <li><a href="index.html">Opportunities</a></li>
                <li><a href="index.html">Cafe</a></li>
                <li><a href="index.html">Corporate</a></li>
            </ul>
        </div>
    </div>
    <div class="copywrite">
        &copy;Cafe Grind 2013
    </div>      
  </footer>
    </div>
</body>
</html>

вот макет, который похож на приведенный выше код

http://tinypic.com/r/2vao12x/5

как я могу нарисовать нижнюю часть изображения, чтобы я не смог повторить все изображение.

пожалуйста, помогите мне в этом вопросе.

Ajay 30 нояб. 2013, в 09:11

Источник

Теги:

javascript

html

image

1 ответ

Ещё вопросы

Flying Scotsman · Answer 1 · 2013-11-30T07-45-00.000Z

Чтобы остановить повторение изображения, вы можете просто изменить CSS

       background: url(bg.png) bottom no-repeat;

Для слайд-шоу я бы создал контейнер для слайд-шоу

     <div id="lightboxdiv"> 
      <a href="" id="lbImagelink">
           <img id="lbImage" src="" align="absmiddle">
       </a>
    </div>

затем используйте некоторые JS для изменения источника изображения на событии таймера

        var lbImg= getelementbyid("lbImage");
        setTimeout(function(){lbImg.src =  imageurl ; },3000);

не уверен, что это то, что вы хотите сделать, но надеюсь, что это поможет...